建站指南


Hexo搭博客

hexo是一款高效的博客框架。相较于wordpress,hexo使用纯静态资源,因此减少了对流量和内存的占用。

本篇博文介绍如何通过github或者自己的服务器搭建一个属于自己的博客。

hexo原理

hexo使用起来非常简单。用户只需要撰写博客内容即可——使用markdown格式。

markdown语法听起来非常吓人,但是非常简单。就是纯文本格式。但是添加少数标记。如通过#标识后面的文本是一级标题,##标识后面的文本是二级标题。等等。支持包括加粗斜体删除线等诸多格式。具体请查看来自简书的markdown基本语法。支持markdown格式的软件会根据标记自动渲染。

有一定英语基础的可以翻阅markdown offical doc.此处不做过多赘述。

而后通过hexo g命令,hexo会自动将用户编写的markdown文件渲染为html文件,从而实现web化。

hexo环境配置

需要的环境:

相关环境配置官方文档有详细介绍,请点击上述两个链接详细查看。

而后通过node自带的包管理器安装hexo:

npm install -g hexo-cli

Windows下打开命令行请右键单击桌面左下角的windows图标,然后打开powershell,即可输入命令。

中国大陆的读者因为某些特殊原因,npm包管理器可能需要更换下载源地址,请采用npm中国源,否则下载速度会非常慢。

安装完成后,即可通过npx hexo <command>使用hexo相关指令了。可以通过npx hexo help查看有哪些指令。

创建一个文件夹,作为容纳博客的根目录

进入此文件夹,输入以下命令(以后hexo省略npx前缀):

1
2
hexo init
npm install

其中hexo init是初始化该目录,npm install是安装依赖。

而后,目录结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
└── yarn.lock

其中大部分是配置文件,不需要关心。注意几个文件:

_config.yml,为总的配置文件。博客的相关主配置就是靠修改该文件。

source目录下的两个文件夹就是包含了博客的原始markdown文件。_posts文件夹下是要发表的文件,_draft文件加下是草稿,不会被hexo自动渲染生成html文件。

此时最基本的hexo已经安装完毕。可以运行

1
hexo server

命令。而后会看见命令行会有输出,其中包括一行

1
Hexo is running at http://localhost:4000. Press ctrl+C to stop

表示hexo易经成功的启动了。在浏览器中输入改链接即可访问本地的博客。

笔者使用的是Linux系统,Windows用户可能有差别,属正常情况。

要想停止hexo,输出给出了提示: press ctrl+C – 按ctrl + C

hexo基础配置

而后讲讲hexo的配置文件_config.yml

yml为一种特殊的文件格式,一般用于配置文件。语法格式为

1
2
3
4
key: value
key:
key1: value1
key2: value2

就是键值对,支持嵌套——值为另一键值对。

有几个常用的、重要的键的配置,请根据自己的需求更改其值(有些可能有默认值):

  • title

    网站的名称。显示在浏览器的最顶端(标签页)处。

  • subtitle

    网站的副标题

  • descrption

    网站描述

  • keywords

    网站的关键词,一般用于百度、谷歌等搜索引擎搜索到改网站的关键词。

  • author

    网站作者。

  • language

    网站所使用的语言,默认英语,en,若是设置为中文,值为zh

  • timezone

    网站的时区。一般默认值即为读者电脑所使用时区。

  • url

    网站的网址。在后续网站部署时会用到。

  • theme

    网站的主题。读者会发现运行hexo server后网站样子和本站不同,原因便是本站使用了其他主题。读者可以在hexo themes中寻找心仪的主题。下载了某一主题的文件夹后,将其置于博客目录下的theme文件夹下即可。

各个主题有其专有的配置,此处不做过多展开,请查询读者选择主题的文档。

其他值一般保持默认即可。

hexo使用

完成_config.yml文件的修改后,就可以开始使用hexo编写推文了。

首先是新建一个博文的markdown文件。

1
2
hexo new draft title
hexo new post title

其中titile为博文标题,请自行修改。

而后命令行会提示生成的文件在哪个文件夹中。一般为博客根目录下的source/_post或者source/_draft文件夹。

那么草稿文件如何发表呢?使用如下命令:

1
hexo publish draft title

其中title为要发表的博客标题(hexo new的时候填写的)

生成的markdown文件具有一些元数据,如下图所示:

meta data

其中title即为hexo new时所输入的title名,date为生成对应markdown时的时间,tag为改博文的标签,一般用于归档、标记。

所有的元数据均是用于辅助hexo渲染的。

当markdown源文件写完后,通过如下命令将所写的markdown文件生成为对应的html静态文件:

1
hexo generate

部署

写了博客仅在本机跑肯定不行,肯定是要上服务器的。一下为两种方法:一种为借助于github,免费但是在中国大陆地区可能会因为某些原因导致访问速度较慢。另一种是上自己的服务器,显而易见的是要收费的。

Github page

首先需要申请一个github帐号。而后新建一个仓库,仓库名为username.github.io,其中username为读者自己的github帐号名。

而后通过npm安装Git相关辅助工具:

1
npm install hexo-deployer-git --save

而后修改_config.yml文件中的deploy配置。

1
2
3
4
deploy:
- type: git
repo:
branch: master

其中repo对应的值为刚刚创建的仓库名,推荐使用[email protected]:username格式。branch为提交的默认分支名,一般设置为master(master为github默认分支)。

配置好_config.yml文件后,通过以下命令将博客相关文件部署到github上。

1
hexo deploy

此时通过浏览器访问username.github.io即可访问自己的博客。

server

在服务器上安装git,而后创建一个git用户。

1
2
yum install git
adduser git

而后选择一个文件夹作为git仓库的地址。通过git初始化。

1
git init --bare <folder_name>

而后修改相关hook函数从而达到部署的目的。

在git初始化目录下的hook文件夹下,创建一个post-receive文件,文件内容如下:

1
2
#!/bin/sh
git --work-tree=/home/www/blog.com --git-dir=/home/git/blog.git checkout -f

其中--work-tree值为博客静态文件的部署目录, --git-dir为当前仓库的地址。

值得注意的是,这两个目录git用户必须都拥有访问权限。若不是,请手动修改。若是两个目录不在同一个/home/user下,需要让--work-tree的home目录对组内用户也拥有x权限。如上述配置,则需要将git加入www组内,而后采用如下命令:

1
chmod -R 755 /home/www

不然推送会因为权限问题失败。

而后将该文件设置为可执行文件

1
chmod +x post-receive

此时服务器对应配置就完成了。

接下来配置本地博客的_config.yml

与github page类似,但是此时repo需要精确到目录

1
2
3
4
deploy:
- type: git
repo: [email protected]:port/home/git/blog.git
branch: master

其中,address为服务器IP地址,可以设置为域名,port为sshd的端口,/home/git/blog.git为刚才设置的仓库地址。

自此,资源从本地推送到服务器的步骤就完成了。此后只需要根据本站的Nginx指北中的反向代理功能配置Web服务器的静态资源映射即可通过网址访问远端博客。