开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

目录

* 基本原理 <https://www.cnblogs.com/enjoy233/p/10468996.html#基本原理>
* 方法1 - 本机Windows下建站 (力荐)
<https://www.cnblogs.com/enjoy233/p/10468996.html#方法1---本机windows下建站-力荐>
* 下载安装node.js <https://www.cnblogs.com/enjoy233/p/10468996.html#下载安装node.js>
* 用管理员权限打开命令行，安装hexo-cli和hexo
<https://www.cnblogs.com/enjoy233/p/10468996.html#用管理员权限打开命令行安装hexo-cli和hexo>
* 下载安装git <https://www.cnblogs.com/enjoy233/p/10468996.html#下载安装git>
* 初始化hexo <https://www.cnblogs.com/enjoy233/p/10468996.html#初始化hexo>
* 使用hexo generate生成静态资源
<https://www.cnblogs.com/enjoy233/p/10468996.html#使用hexo-generate生成静态资源>
* 在本地运行hexo，看一切是否正常
<https://www.cnblogs.com/enjoy233/p/10468996.html#在本地运行hexo看一切是否正常>
* 在Coding.net创建与用户名相同的项目，并启用代码的pages功能
<https://www.cnblogs.com/enjoy233/p/10468996.html#在coding.net创建与用户名相同的项目并启用代码的pages功能>
* 启用通过git将hexo部署到远程的功能
<https://www.cnblogs.com/enjoy233/p/10468996.html#启用通过git将hexo部署到远程的功能>
* 使用_config.yml来配置hexo
<https://www.cnblogs.com/enjoy233/p/10468996.html#使用_config.yml来配置hexo>
* 使用hexo clean && hexo g && hexo d发布hexo博客
<https://www.cnblogs.com/enjoy233/p/10468996.html#使用hexo-clean-hexo-g-hexo-d发布hexo博客>
* 域名绑定 <https://www.cnblogs.com/enjoy233/p/10468996.html#域名绑定>
* 主题使用 <https://www.cnblogs.com/enjoy233/p/10468996.html#主题使用>
* 方法2 - Cloud Studio下建站 (力荐)
<https://www.cnblogs.com/enjoy233/p/10468996.html#方法2---cloud-studio下建站-力荐>
* 在Coding.net创建与用户名相同的项目，并启用pages功能
<https://www.cnblogs.com/enjoy233/p/10468996.html#在coding.net创建与用户名相同的项目并启用pages功能>
* 使用现有项目创建工作区 <https://www.cnblogs.com/enjoy233/p/10468996.html#使用现有项目创建工作区>
* 使用命令行配置环境 <https://www.cnblogs.com/enjoy233/p/10468996.html#使用命令行配置环境>
* _config.yml文件的配置、域名绑定、主题使用等等
<https://www.cnblogs.com/enjoy233/p/10468996.html#config.yml文件的配置域名绑定主题使用等等>
本文介绍对开发小白也毫无压力的hexo静态博客建站全攻略，github.io与coding.me的静态博客类似，3年前本人基于本机Windows在
github.io上创建了静态Github Pages - yanglr <https://yanglr.github.io>，本文以在Coding pages
上建站为例。

基本原理

配置区: 用于hexo博客的配置，成功部署后原hexo init产生的目录下会生成一个public的文件夹。

发布区:
事实上，这一部分就是由配置区生成的public文件夹中的内容。

发布区的代码必须是公开的，配置区的代码看需要了，如果git部署时使用的是repo: https://用户名:密码@仓库地址这种方式，如果也push
到公开代码的仓库就会泄漏个人密码了，所以建议配置在自己的电脑上进行，或使用ssh key的形式代替明文密码。

方法1 - 本机Windows下建站 (力荐)

下载安装node.js

到官网 <https://nodejs.org/en/blog/release/>下载nodejs的最新LTS版安装即可。

用管理员权限打开命令行，安装hexo-cli和hexo
$ npm install hexo-cli -g $ npm install hexo --save
如果安装速度很慢，可以考虑先换淘宝镜像源:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
再继续进行安装~

下载安装git

到Git官网 <https://git-scm.com/>下载Git Windows版，使用默认设置进行安装即可。

初始化hexo

比如，打算在D:\盘进行配置，若将配置的文件夹取名为blog，操作如下：
$ cd D:\ $ hexo init blog
文件夹名字任意起，根据个人需要了。

使用hexo generate生成静态资源

存放hexo配置的文件夹blog创建好之后，就可以使用hexo generate来生成静态资源了，该命令也可简写为"hexo g"。

在本地运行hexo，看一切是否正常

此时可使用hexo server(简写为hexo s)来开启本地web服务器查看页面效果，默认情况下在浏览器中打开http://localhost:4000
即可看到如下界面:


在Coding.net创建与用户名相同的项目，并启用代码的pages功能

打开网址https://dev.tencent.com/user/projects/create
<https://dev.tencent.com/user/projects/create>，即可创建项目。
由于项目名字与用户名legege007一致，所以我的coding静态pages的访问地址即为 legege007.coding.me
<http://legege007.coding.me/>, 你用同样的方法，地址会变成你的用户名.coding.me。而如果你的项目名是blog,
而用户名不是blog，则此时coding静态pages的访问地址即为你的用户名.coding.me/blog,
这样会有一个隐含的问题在，就是如果你要绑定个人域名，会导致静态资源js、css等加载失败，即博客会出现有文字但呈现页面混乱的情形。

这里也亲自淌过坑，最终发现有效的处理办法是:
创建的项目名必须要和用户名一致，创建的项目名必须要和用户名一致，创建的项目名必须要和用户名一致，强调三连~

启用通过git将hexo部署到远程的功能

完成此项工作，需要先安装hexo-deployer-git, 相应需要在命令行中执行:
$ npm install hexo-deployer-git --save
安装途中可能会遇到问题:
"npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is
installed. You must install peer dependencies yourself. ",
这里亲自淌过坑，试了很多方法，最终发现有效的处理办法是:
$ npm install lodash $ npm install eslint@^4.12.0
使用_config.yml来配置hexo

一开始，我们只需要修改deloy相关才参数即可.
deploy: type: git #上传类型 选择git repo:
https://legege007:yl15826911621@git.dev.tencent.com/legege007/legege007.git #
执行 git remote -v 可以获得 branch: master # 部署到 Master分支 #message: update blog #
每次提交的信息 不填默认为当前时间
只需要将repo改为你的仓库的ssh版地址即可。
同时，你还需要在coding项目中加入自己的公钥，具体方法为:
打开命令行终端输入ssh-keygen -t rsa -C <your_email@example.com>(你的邮箱)，连续点击 Enter 键即可。
Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] //
此处推荐使用默认地址，也可在密钥后面加后缀,即输入"id_rsa_coding"
找到刚才生成的id_rsa_coding.pub，将其中的内容贴到Coding的公钥信息中：

此时，git推送应该具有权限了~
目前为止，_config.yml配置文件只需要改deploy这一处！

使用hexo clean && hexo g && hexo d发布hexo博客

不出意外的话，等命令完全跑完就能从静态地址你的用户名.coding.me看到你的博客内容了。

域名绑定

先去域名管理系统中加一条CNAME记录, 比如我的域名是https://enjoy233.cn <https://enjoy233.cn>，此处想绑定到
https://www.enjoy233.cn <https://www.enjoy233.cn>，则添加方法如下：


将_config.yml中的url从http://yousite.com改为实际用的，比如我设置为:
url: //www.enjoy233.cn root: /
然后在coding pages的页面中设置如下:

过几分钟后，就能通过域名https://www.enjoy233.cn <https://www.enjoy233.cn>来访问我的博客了。

主题使用

个人觉得 hexo主题 Material X <https://xaoxuu.com/wiki/material-x/>还挺不错的，配置文档为
Material X - Wiki <https://xaoxuu.com/wiki/material-x/>~
就安装试了一下，首先命令行要做的事情是：
$ cd blog $ git clone https://github.com/xaoxuu/hexo-theme-material-x
themes/material-x $ npm i -S hexo-generator-search hexo-generator-feed
hexo-renderer-less hexo-autoprefixer hexo-generator-json-content
hexo-recommended-posts
然后将_config.yml中的theme(默认是landscape)配置为:
theme: material-x
此时，再使用hexo clean && hexo g && hexo d发布博客，然后刷新博客就能看到使用主题后的效果了。

方法2 - Cloud Studio下建站 (力荐)

此处介绍在Cloud Studio中使用两个branch建站的方法，master分支作为发布区，config
分支作为配置区。如果不另建分支，千万不要使用Cloud Studio的push代码的功能，不然上传的会是配置相关的所有文件(真个blog文件夹，而不是仅有
public文件夹下的内容)，会导致博客无法正常使用。
这里也亲自淌过坑，所以强调一下~

在Coding.net创建与用户名相同的项目，并启用pages功能

打开网址 https://dev.tencent.com/user/projects/create
<https://dev.tencent.com/user/projects/create>, 开始创建项目。

我的用户名是legege007，于是就建了个legege007的项目.


使用现有项目创建工作区

打开网址 https://studio.dev.tencent.com/dashboard/workspace/create
<https://studio.dev.tencent.com/dashboard/workspace/create>, 即可进入Cloud Studio。
我选择使用了node.js的环境来进行配置，同时选中项目legege007，然后创建即可。


使用命令行配置环境

Cloud studio中默认是Linux系统，我习惯于用root的权限来操作，免得后面还需要用chmod之类的命令来改权限，一进IDE界面，使用命令
sudo su切换即可。
$ sudo su
然后新建config分支后，配置主要在该分支上进行。
$ git checkout -b config
其他相关命令使用过程具体如下:
➜ workspace git:(master) sudo su root@coding:/home/coding/workspace# git
checkout -b config root@coding:/home/coding/workspace# git checkout -b config
Switched to a new branch 'config' root@coding:/home/coding/workspace# hexo init
blog root@coding:/home/coding/workspace# cd blog/
root@coding:/home/coding/workspace/blog# hexo g
root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d
root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save
root@coding:/home/coding/workspace/blog# npm audit fix
root@coding:/home/coding/workspace/blog# npm install lodash
root@coding:/home/coding/workspace/blog# npm install eslint@^4.12.0
root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save
root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d
root@coding:/home/coding/workspace/blog# ssh-keygen -t rsa -C
"legege007@yeah.net" root@coding:/home/coding/workspace# cd ~/.ssh
root@coding:~/.ssh# ls id_rsa id_rsa.pub known_hosts root@coding:~/.ssh# vim
id_rsa.pub root@coding:/home/coding/workspace/blog# hexo clean && hexo g &&
hexo d
上述命令和在windows下操作时基本一致遇到问题，解决问题即可~

_config.yml文件的配置、域名绑定、主题使用等等

_config.yml文件的配置、域名绑定、主题使用等等，基本上与在Windows下安装完全一样，参考Windows下同样的操作即可，就不再赘述了。

安装完主题后的界面是:


另外，值得一提的是:
Cloud Studio还有几个优势，即:

* 可以迅速切换环境，比如hexo、node.js、.net Core、Ubuntu、Java等互转，速度超快的。
* 可以一键部署，除了coding.me的域名可用以外，一键部署后，还提供一个coding.io的域名可以访问。如果暂时没买个人域名，这就是个大福利了~


如有帮助，麻烦在右下角"推荐"一下，多谢~

• « 上一篇：爬虫问题总结
• » 下一篇：程序员你需要鼓励师吗？