从需求出发
对于前端开发者,计算机、软件工程等专业的同学、或者对编程感兴趣的人群,拥有一个属于自己的网站,并且可以被别人访问是一件很酷的事情,他可以是我们沉淀知识的平台,也可以作为自己的小窝写一些emo🥺日记。但是考虑到有很多小白不是前端方向或者没有系统的学习过某一语言,搭建一个网站是比较繁琐的,于是有以下需求。
- 不需要购买服务器,云主机等繁琐配置
- 专心内容创作,不需要花更多的时间在布局上
- 语言,技术栈要求不高,上手容易
技术选型
我们要展示网页,首先要有web页面,也就是俗称的网页,对于大牛,完全可以自己手动code,一个人打通前后端。但市面上已经有很多成熟的的框架供我们选择,下面介绍一些常见的框架。
wordpress (php+MySQL):
适用于博客到大型网站的 CMS (内容管理系统) | WordPress.org China
优点:社区支持多,主题丰富,衍生插件多,可自定义程度高。
缺点:部署麻烦,学习门槛高,对小白不友好。
为什么❓对于大多数刚接触前端的同学,自己手动去编写一个个人博客网站比较费力,所以采用自动生成文档的方式,只需要学习markdown语法,就可以进行创作,而支持markdown语法的编辑器有很多,你可以在平台创作之后,将代码移动到项目中,框架会帮助你解析成html文件。
docisfy ---docsify 可以快速帮你生成文档网站
Vue-press(vue技术栈)
VuePress 是一个以 Markdown 为中心的静态网站生成器。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。
dumi(React技术栈)
适用于组件化文档
Hexo(Node.JS+原生JavaScript)
专为博客而生,主题同样很丰富,社区支持多。
以下内容基于Hexo,Github-Pages托管,主题使用Hexo-theme-yun
🚀 流程
Hexo本地开发依托于Node.JS环境,又因为他开源托管在GitHub中,所以我们需要下载git与node.js 百度官网直接下载,无脑式安装。这里不作赘述。
前置工作
推荐长期维护版,默认安装。
根据操作系统选择对应版本
cmd命令查看版本号
下载Hexo-cli (command-line interface)命令行工具,初始化内容
$ npm install hexo-cli -g$ hexo init <project name> $ hexo serve
FAQ:初始化失败
fatal: unable to access 'github.com/hexojs/hexo…': OpenSSL SSL_read: Connection was reset, errno 10054
由于我们需要借助git来拉取github中的代码,所以会受到网络影响,再次尝试即可。
默认启动项目后,hexo serve启动服务,在localhost:4000中打开项目,可以看到hexo默认为我们提供的主题。\
接下来安装我们想要的主题,可在Hexo官网中查找,这里以Hexo-theme-yun为例,因为我喜欢蓝色系的是事物,而且他有详细的配置项,对小白十分友好,点击阅读原文可以查看官方文档。
\
git clone https://github.com/YunYouJun/hexo-theme-yun themes/yunnpm install hexo-render-pug
由于我们的主题使用了pug模板引擎,而默认安装的是ejs,所以还需要下载pug模板引擎。同理,这里也会受网络影响。
二次开发,自定义。
选择一款自己喜欢的IDE,打开项目,修改配置,使主题生效。Hexo配置以及基础可以查看官方文档,本文只介绍基础配置和命令。
修改_config.yml文件theme字段,使用主题。
再次启动项目,在localhost:4000查看,接下来就可以进行自定义了。
部署上线
静态页面,web应用部署主流解决方案有
- 云主机/服务器+公网Ip+独立域名进行访问
- 云托管,腾讯云cloudbase,webify
- GitHub/gitee等代码托管平台
前两种方案需要收费,并且是为web应用而生,这里我们采用第三种。
tips:gitee pages 需要实名,github pages属于原生方案,但会牺牲访问,部署速度。
注册GitHub 账号,使用邮箱即可,新建仓库。
安装要求命名为<your-name.github.io>
一定要符合规范才能开启github pages
Hexo 还提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上,需要下载deploy.git工具。
npm install hexo-deployer-git --save
在_config.yml中修改文件deploy字段
deploy:
type: git
repo: git@github.com:SiQuan-Wen/SiQuan-Wen.github.io.git
branch: master # 默认使用 master 分支
message: Update Hexo Static Content # 你可以自定义此次部署更新的说明
$ hexo deploy
由于GitHub 升级了安全策略,所以https推送代码可能会被拒绝,需要开启SSH/token,关于这部分可以参考csdn等平台解决,也可以关注我的语雀文档。
END