Hello My Blog

早就有自己搭建一个博客的想法了，之前总是想着从无到有的搭建方式，由于难度较大就没有完成。一直拖着也不是办法，就先用博客框架吧，以后自己学习完前后端的知识再从头搭一个把文章转过去就行。这里要感谢 hexo 让我轻松完成了博客的搭建！

记录下搭建的过程吧，嘿嘿~~~

机器架构: x86_64
操作系统: 18.04.1-Ubuntu

安装环境
美化博客
个人信息设置
生成静态文件
网站部署
发布文章
添加后台管理插件 hexo-admin
参考

安装环境

安装 npm，可以去 github 上搜索 npm，仓库的 README 有给出安装方式
1
$ curl -qL https://www.npmjs.com/install.sh | sh
安装并启动博客
1
2
3
4
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
Run server
1
$ hexo server
当出现以下输出时：INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 就可以在浏览器上输入 https://localhost:4000 来访问博客了！
More info: Server

美化博客

挑选主题

可以去 hexo 官网的 Themes 菜单下挑选自己喜欢的主题
也可以去 github 搜索 hexo 然后选那些 star 比较多的主题

挑选完毕之后，就需要把主题下载到本地的 blog/themes 目录下，例如我挑了个 hexo-theme-next 主题，切换到 blog/ 目录下并执行如下命令：

1	$ git clone https://github.com/iissnan/hexo-theme-next themes/next

Rerun Server 通过浏览器就能看到博客已经被美化了

个人信息设置

这个环节需要了解 2 个配置文件

blog/ 目录下的 _config.yml 是用来配置站点信息的，例如可以改变博客网站的 Title，加上个人 Logo 等等
blog/themes/主题/ 目录下的 _config.yml 是用来配置主题的，例如设置导航栏，设置 SideBar 等等

如果想要了解 _config.yml 中每个 Setting 信息，可以去 hexo-config 网站看看

生成静态文件

hexo 是一个静态博客框架，也就是说客户端发出请求后，服务器仅仅是将静态页面作为响应发送回去，并不涉及数据库的访问等等。因此在我们写好一篇博客后就可以让 css、js 进行渲染直接生成静态的 html

生成静态文件的命令：

1	$ hexo generate

执行完上述命令后，可以看到在 blog/ 目录下多了个 public/ 目录，这里面存储的就是静态文件了！

可以通过 hexo clean 命令删除 public/ 目录

More info: Generating

网站部署

上面只是在本地预览，接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。

我把博客网站架在了 github 上。

在这一步很容易犯错导致最后部署失败。

首先在 github 创建一个仓库，为了 100% 成功仓库名一定要是 username.github.io 其中 username 就是你 github 的用户名

配置 blog/ 目录下的 _config.yml 文件，有两部分需要编辑

找到 _config.yml 中的注释 #Deployment （如果没有就自己在文件最后加上），然后添加以下内容
1
2
3
4
5
6
#Deployment
deploy:
type: git
repo: https://github.com/username/username.github.io
root: /
branch: master
注意：branch 需要看你创建的仓库的默认 branch 是什么再填写，我的默认 branch 是 master（有的可能是 main）

找到 _config.yml 中的注释 #URL （如果没有就自己加上），然后添加以下内容：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://username.github.io/   # 这里是你的仓库名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

注意：如果你完全按照第 1 步的步骤，那么 url 的 username 就是你的 github 用户名

保存站点配置文件

其实就是给 hexo d 这个命令做相应的配置，让 hexo 知道你要把 blog 部署在哪个位置，很显然，我们部署在我们 github 的仓库里。最后安装 Git 部署插件，输入命令：

1 2	$ npm install hexo-deployer-git --save

这时，我们分别输入三条命令一键完成部署：

1
2
3

$ hexo clean
$ hexo g
$ hexo d

其实第三条的 hexo d 就是部署网站命令，d 是 deploy 的缩写。完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 http://xxxx.github.io 其中 xxx 就是你的 github 用户名

More info: Deployment

发布文章

我们开始正式发布博客文章，在命令行中输入：

1	$ hexo n "博客的名字"

我们会发现在 blog/source/ 目录下的 _post/ 目录中多了一个 博客名字.md 文件，使用 Markdown编辑器 打开，就可以开始你的个人博客之旅了，Markdown 常用的样式也就十来种，完全能够满足一般博文的样式要求。

通过带有预览样式的 Markdown 编辑器实时预览书写的博文样式，也可以通过命令 hexo s –debug 在本地浏览器的 localhost:4000 预览博文效果。写好博文并且样式无误后，通过 hexo g && hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

以后写好的文章只要拖到 blog/source/_post/ 目录下，hexo 会自动把文章渲染出来放到你的博客网站上

添加后台管理插件 hexo-admin

如果没有后台管理功能每次写完 markdown 文章都需要放到 blog/source/_post 目录下并且 hexo g && hexo d 来重新生成、部署网页，这样做有点麻烦，所以可以搞个 hexo-admin 插件来帮助我们。

切换到根目录 blog/，安装 hexo-admin 插件：

1 2	$ npm install --save hexo-admin $ hexo s

用浏览器打开 http://localhost:4000/admin/ 就能看到 后台UI 了！现在还没有创建用户密码，所以别人是能直接进入你的后台的，那么哪一天你一上自己的网站发现小广告漫天飞可不要感到奇怪哦~~~ 所以在后台的 Setting 中创建一个用户吧！最后把

admin:
    username: username
    password_hash: xxxxxxxxxxxxxxxxxxxxxx
    secret: a secret something

复制到 blog/ 目录下的 _config.yml 文件的最后面就可以了。这样别人就不能随便进入你的后台了！

以后通过后台写完文章后可以点击 Deploy 菜单来提交。

但是我按了 Deploy 没反应是怎么回事？

原来是进入后台之后点击 Deploy，里面的 Deploy 按钮是用来执行发布脚本的，所以我们先在博客根目录下新建个目录 admin_script，然后在目录中新建一个脚本 hexo-g.sh，里面写下下面代码然后保存:

1	hexo g && hexo d

然后给 hexo-g.sh 加入可执行权限：

1	$ chmod +x hexo-g.sh

然后在 _config.yml 中的 admin 下添加:

admin:
    username: username
    password_hash: xxxxxxxxxxxxxxxxxxxxxx
    secret: a secret something
    deployCommand: ./admin_script/hexo-d.sh

再按下 Deploy 按钮，果然可以发布了！