Hexo博客搭建

时间 2019-11-30

标签 hexo 博客搭建繁體版

原文原文链接

本文讲解我在搭建Hexo博客的完整过程，主要内容包括GitHub与SSH、FAQ等。php

另外还须要注意的是：css

Hexo博客框架和nexT主题的搭建过程本文会直接引用官方教程，一笔略过；
因为我是在Mac上搭建Hexo博客的，全部一些命令在Windows的终端中可能找不到，请自行下载安装。

下面进入正文：html

一开始的时候我没有注册域名，静态生成的文章都是放在GitHub上的，这里先以这种状况来讲明：node

GitHub建立与配置

建立GitHub帐号

Step1 Set up a personal account

首先在浏览器中输入网址：https://github.com/join?source=header-home，而后填写用户名、邮箱、密码，注意：该邮箱地址在以后的SSH配置中有重要做用，最后点击Create an account按钮，界面以下图所示：linux

Step2 Choose your plan

默认选择便可，直接点击Continue按钮，进入下一步进行邮箱验证，界面以下图所示：nginx

Step3 Tailor your experinece

登陆本身设置的邮箱，点击验证邮箱之类的按钮后会进入此处，若是在其左上角有Your email was verified.这样的文案代表邮箱验证成功。git

配置GitHub相关信息

建立工程

如图所示：github

若是你从未使用过GitHub，能够点击Read the guide按钮学习如何建立工程并使用。web

若是你知道如何建立GitHub工程的话，那就简单了，直接点击Start a project按钮就能够开始工程的建立，固然也能够从此处进入。依次填写仓库名、描述信息、初始化README文件，最后点击Create repository按钮，就成功建立一个工程了。可是由于该工程是提供给Hexo博客使用的，因此有如下几个注意点：shell

仓库名必须为name.github.io这样的格式，须要注意的是：除了大小写能够不一样以外，name必须和Github's Username如出一辙；还有听说后面的io也能够是com，这个我就不清楚了，有兴趣的能够尝试一下。
描述信息和是否初始化README文件彻底看我的兴趣，可是个人建议是须要的，由于这样能直截了当的明白这个工程是干吗用的。

例以下图所示：

偏好设置

若是你熟悉GitHub，则能够进行一些偏好设置，即个性化设置，如上传头像。这些都是很是简单的，所示就不作阐述了。接着咱们开始配置SSH，这个是重点。

配置SSH

打开终端，输入命令：
```
$ ssh -T git@github.com
```
若是输出内容是Permission denied (publickey).，则代表咱们还没有在GitHub中正确配置SSH；反之则代表配置成功，直接跳过这一部分便可。
继续输入命令：
```
$ ssh-keygen -C "Your primary GitHub email address”
```
切记必须修改命令中的邮箱地址，该邮箱地址即为你注册GitHub时所填写的邮箱地址。输入成功以后会依行出现以下图所示提示：

分别表示为文件名、密码和确认密码，输入正确后会给出重要的配置信息。
继续输入命令：
```
$ cat ~/.ssh/key's filename.pub | pbcopy
```
该命令中pub文件的文件名即为上一步中设置的文件名，因为该命令中包含pbcopy关键字，因此该命令能够将pub文件中的内容直接复制到剪切板中，以防以后在网页中配置SSH信息时发生没必要要的错误。
打开配置SSH的网页，点击右上角的New SSH key按钮，以下图所示：

接着将pub文件中的内容粘贴到Key表示的文本框中，而后在Title表示的文本框中随便命名一个名字，最后点击Add SSH key按钮便可添加SSH key。
虽然已经成功添加了SSH key，可是这并不表明着SSH配置成功了，咱们继续在终端输入命令：
```
$ ssh -T git@github.com
```
若是输出内容包含You've successfully authenticated, but GitHub does not provide shell access.则代表SSH配置成功；若是出现错误信息，能够继续输入该命令：
```
$ ssh -Tv git@github.com
```
进行诊断与调试。
最后附上配置SSH的官方教程，仍是很详细的。

安装Git与Node.js

安装Git

什么是Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

中文解释：Git是一个免费且开源的分布式版本控制系统，它被设计出来的目的是快速且高效的管理任何一个从小到很是大的工程。

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

中文解释：Git是易于学习而且拥有极小的空间和闪电般的速度，它远高于那些像Subversion、CVS、Perforce和ClearCase一类的SCM工具，它拥有简单的本地分支，方便的分段区域和多个工做流的功能。

引用摘自Git官网

有兴趣的话能够看看：廖雪峰的Git经典入门教程

安装与校验

安装Git的方式有不少种，咱们便可以从官网下载，也可使用其余方式安装，这里咱们使用Homebrew来进行安装。

安装Homebrew：打开终端以后，输入下面命令便可：

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

安装Git：Homebrew安装完成以后，继续输入命令就会自动下载最新的Git进行安装：
```
$ brew install git
```
校检Git是否安装成功：继续输入命令：
```
$ git --verison
```
若是正确输出版本号信息，则代表Git安装正确，反之则代表安装失败；若是操做无误的话，请尝试其余途径，如：从官网下载。

安装Node.js

什么是Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

引用摘自Node.js官网

中文解释：Node.js是一个基于Google Chrome浏览器的V8引擎的Javascript运行环境（支持的系统包括*nux、Windows），使用事件驱动和非阻塞I/O模型使其更轻量且高效。

安装与校验

安装Node.js的方式有不少种，这里介绍两种：

使用Homebrew安装：
```
$ brew install node
```
这里咱们只要进入Node.js官网，而后下载须要的版本进行傻瓜式安装操做就能够了，如官方推荐版本。

其余安装方式能够参考此处：Hexo开始使用-概述-安装 Node.js。

最后，安装完成以后，跟安装Git同样，咱们也须要判断Node.js是否安装正确，一样十分简单，在终端输入命令：

$ node -v

若是正确输出版本号信息，则代表Node.js安装正确。

Hexo搭建与配置

在搭建Hexo博客框架以前，咱们还须要安装NPM。若是你以前是经过Homebrew安装Node.js的话，就无需担忧了，由于会附带安装NPM；
若是你是经过其余方式安装的话，请自行谷歌、百度。

Hexo的搭建在官网上已经讲解的十分详细了，此处提供一个传送门，下面我主要讲一些在Hexo搭建与配置的过程当中须要注意的地方：

deploy

安装方式：

npm install hexo-deployer-git --save

官方教程：Hexo基本操做-部署

注意事项：

因为_config.yml文件使用YAML格式编写，因此必须注意缩进（缩进时不容许使用Tab键，只容许使用空格）和空格。
若是Hexo的版本大于3.0，则deploy的type属性值需填写为git，不然需填写为github。
deploy的repository属性值为咱们一开始在GitHub中建立的仓库地址。
在执行hexo deploy命令进行部署时，若出现ERROR Deployer not found: git之类的错误提示，应该是你的_config.yml文件填写错误，请仔细排查，哪怕是一个空格。固然也有多是由于你以前在安装自动化部署插件时没有添加--save选项致使，固然也有多是其余缘由。

NexT主题安装与配置

NexT能够说是在搭建Hexo博客中资料最全的主题了，官网对于NexT主题的安装与配置已经讲解的很是详细了，包含：开始使用、主题配置、第三方服务、内建标签等内容，能够经过此传送门一步步操做。下面列举一些注意点：

如何设置网站背景

若是你想要给本身的网站加一个背景图片也很简单，你只须要一下两步就好了：

首先将背景图片存放到该目录下：
```
Blog $ cd themes/next/source/images/
```
接着打开你的scheme所在的目录，好比个人scheme是Mist，而后编辑index.styl文件，即如下两条命令：
```
Blog $ cd themes/next/source/css/_schemes/Mist(Pisces和Muse也行)/
Blog $ vim index.styl
```
打开index.styl文件以后，在Components上面新增设置背景图片的代码，具体内容以下所示：
```
// 省略一些代码
@import "sidebar/sidebar-blogroll";

body { background:url(/images/back.png);}

// Components
// 省略一些代码
```
最后从新部署就能够了！

VPS(CentOS)搭建Hexo博客并配置Git

上面的教程中只是把博客部署在Github中，若是本身买了个域名，而且想要把博客搭建在本身的VPS虚拟主机中的话，还须要配置一些东西。

另外说明几点：

我是使用SecureCRT链接服务器的，固然你也可使用其余工具链接，至于怎么链接应该很简单的，就是配置ip地址、端口号，若是不会，请自行谷歌、百度。
个人VPS虚拟主机安装的是CentOS系统，下面是等会要用到的一些命令：

su：切换用户
mkdir：建立目录
touch：建立文件
echo：写入指定内容到指定文件
cat：查看文件内容，用于验证文件内容是否正确
chmod：设置文件或文件夹的权限

配置Nginx源配置文件

首先须要在/etc/yum.repos.d目录下建立Nginx源配置文件nginx.repo，写入以下代码：

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

安装Nginx并校验

[root@localhost /]# yum install nginx -y

[root@localhost /]# nginx -v
nginx version: nginx/1.10.3

部署Nginx

配置站点解析配置文件

在/etc/nginx/sites-available目录下建立配置文件hexo.conf，写入以下代码：

server {
  root /var/www/fqxyi.com/public; # 站点目录
  index index.html index.htm; # 主页
  server_name www.fqxyi.com fqxyi.com; # 域名
  location / {  # 当输入的网址不存在时，会尝试重定向到404页面
    try_files $uri $uri/ /404/;
  }
}

添加站点解析配置文件

在/etc/nginx/nginx.conf文件的http选项中添加以下代码：

include /etc/nginx/sites-available/*.conf;
include /var/www/*.conf;

配置防火墙并校验

[root@localhost /]# iptables -I INPUT -p tcp --dport 80 -j ACCEPT

[root@localhost /]# /etc/init.d/iptables status

若是显示结果中包含ACCEPT tcp -- 0.0.0.0/0 0.0.0.0/0 tcp dpt:80\，则说明配置成功。

启动Nginx服务

[root@localhost /]# service nginx reload
[root@localhost /]# /etc/init.d/nginx start

若无错误提示信息，则表示Nginx服务启动成功

建立站点管理者

另外，为了安全考虑，能够在VPS上建立一个普通用户(fqxyi)专门来管理网站的。

建立用户组及用户并校验

[root@localhost /]# groupadd sitesManagers # 建立用户组
[root@localhost /]# useradd fqxyi -m -g sitesManagers # 建立用户
[root@localhost /]# finger fqxyi # 校验用户
Login: fqxyi                            Name:
Directory: /home/fqxyi                  Shell: /bin/bash
Last login Sun Feb 19 04:00 (EST) on pts/0 from 114.114.114.114
No mail.
No Plan.
[root@localhost /]# groups fqxyi # 校验用户组
fqxyi : sitesManagers

注意：114.114.114.114是当前网络的ip地址，这个值是我随便写的，请忽略。

设置用户密码

[root@localhost /]# passwd fqxyi

设置fqxyi目录权限

[root@localhost /]# chmod 755 /home/fqxyi

给fqxyi用户添加sudo权限

修改/etc/sudoers文件，找到以下指令添加一条

... // 省略一些代码
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
fqxyi   ALL=(ALL)     ALL # 新增这条指令
... // 省略一些代码

建站测试

建立测试页面

进入/var/www/fqxyi.com/public目录，执行下列操做便可：

[root@localhost /]# cd /var
[root@localhost var]# mkdir www
[root@localhost var]# chmod 777 www
[root@localhost var]# su fqxyi
[fqxyi@localhost var]# mkdir -p /var/www/fqxyi.com/public
[fqxyi@localhost var]# cd /var/www/fqxyi.com/public
[fqxyi@localhost public]# echo "This is test HTML" > index.html

预览测试页面

打开浏览器，输入域名：fqxyi.com，查看是否显示：This is test HTML。

删除测试文件

[fqxyi@localhost public]# rm index.html

安装配置Git

安装并验证Git

[root@localhost /]# yum install git
[root@localhost /]# git --version
git version 1.7.1

修改VPS上ssh的端口号

将/etc/ssh/sshd_config文件中的Port值修改成22，文件较长，应该在最后：

... // 省略一些代码
#   ForceCommand cvs server

PermitRootLogin yes
Port 22

之因此修改成22，是由于使用ssh链接服务器的默认端口是22，原本想着在站点配置文件中deploy属性下新增port属性，解决端口无需限制为22的状况，然而没有成功...

ssh远程登陆验证

在本地终端使用ssh登陆VPS的fqxyi用户，验证是否可以正常访问服务器。

fengqingxiuyi:~ qingfeng$ ssh fqxyi@fqxyi.com
fqxyi@fqxyi.com's password:
Last login: Sun Feb 19 04:00:53 2017 from 114.114.114.114
-bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory
[fqxyi@localhost ~]$

注意：114.114.114.114是当前网络的ip地址，这个值是我随便写的，请忽略。

由于我已经成功链接过了，因此显示的结果是这样的。若是你从未这样操做过，能够查看配置SSH章节，而后请将你本身设置的.pub文件中的内容，从AAA开头复制到最后，等到下一章节使用。

使用普通用户(fqxyi)配置Git

在网站管理者的家目录配置.ssh公钥，用于静态文件本地与VPS同步。将上一步复制的本地公钥，粘贴到VPS的authorized_keys文件中

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir .ssh
[fqxyi@localhost .ssh]# cd .ssh
[fqxyi@localhost .ssh]# echo "本地的公钥(AAA开头)" > authorized_keys
[fqxyi@localhost .ssh]# cat authorized_keys # 务必查看是否添加成功

配置Git仓库

在VPS上初始化Git仓库，配置hooks目录下的post-receive文件，实现本地静态文件发布时自动同步到站点目录。

初始化Git仓库

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir fqxyiBlog.git
[fqxyi@localhost ~]# cd fqxyiBlog.git
[fqxyi@localhost fqxyiBlog.git]# git init -—bare # 两个 - 符号

配置Git仓库

在/home/fqxyi/fqxyiBlog.git/hooks目录建立post-receive

[fqxyi@localhost fqxyiBlog.git]# cd hooks
[fqxyi@localhost hooks]# touch post-receive
[fqxyi@localhost hooks]# chmod 755 post-receive

而后在post-receive文件写入如下内容：

#!/bin/bash -l
GIT_REPO=/home/fqxyi/fqxyiBlog.git # Git仓库
TMP_GIT_CLONE=/tmp/fqxyiBlog
PUBLIC_WWW=/var/www/fqxyi.com/public # 站点目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

博客初始化与编译发布

修改站点配置文件_config.yml

在_config.yml文件末写入以下内容

deploy:
    type: git
    repo: fqxyi@fqxyi.com:fqxyiBlog.git
    branch: master

发布到VPS服务器

使用MarkDwon编写文章，并保存到suource/_posts文件夹下，而后使用下面的命令实现静态生成和VPS部署。

fengqingxiuyi:hexo qingfeng$ hexo clean && hexo g && hexo d

MarkDown

Hexo博客是基于Markdown来进行编写的，因为相关的编辑器也有不少，因此这里就不作太多阐述了，你们有兴趣能够去这里看看。

好比使用Mou编辑器进行编写，界面效果以下所示：

不过我推荐的是马克飞象和MWeb，二者不只能达到很好的实时预览效果，还可以同步文章到印象笔记。

二者均可以体验一段时间，若是以为好的话，并且愿意花75RMB/年，建议使用前者。不过我选择了后者，虽而后者同步文章到印象笔记没有前者那么智能，可是有破解版。

下面是二者的界面效果：

最后附上教程地址：Markdown简单的世界

FAQ

favicon不显示

当咱们在搭建Hexo博客的时候，必然会自定义favicon.ico，显示在网页选项卡的左上角，如图所示：

设置favicon也很简单，只须要在主题配置文件_config.yml中，进行以下操做便可：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/Blog/favicon.ico

若是favicon的路径设置正确，并且清除了缓存，刷新了页面好几回，但favicon仍然不显示的话，能够等待一段时间，再去刷新，可能就会显示了！

404问题

现象：从首页点击某篇文章跳转到了404页面！

分析：既然出现了404页面，那么一定是路径问题；仔细检查路径发现，原来是之前名为mou.md的文件，如今变成了Mou.md。因此在github上路径中文件夹的名字仍然是mou，而不是Mou。

解决：原本觉得只须要执行如下命令就能够了：

Blog$ hexo clean && hexo g && hexo d

后来发现本身仍是太年轻了，由于hexo clean的只是本地的文件，和github彻底没有关系，以后想了半天也毫无头绪，因而另辟蹊径：将Mou.md文件再重命名一下，如Mou2.md，执行上述命令以后，再重命名回Mou.md，再执行上述命令就能够了。😄

总结：当我在重命名md文件时，切忌不可只是进行了大小写转换，由于像这样把文章部署到github上以后，文件名对应的文件夹是不会发生变化的！！！

干货

最后附上一些干货，方便你们查找使用，包含谷歌百度收录问题、版权信息追加等

Wiki形式

禁止md文件生成html文件

只须要把.md文件的后缀名改成.mdown便可！

百度主动推送

curl推送示例

curl -H 'Content-Type:text/plain' --data-binary @urlPath "http://data.zz.baidu.com/urls?site=fqxyi.com&token=yourToken"

yourToken能够从百度站长平台主页-网页抓取-连接提交-自动提交-主动推送(实时)处得知，此外你还能够发现其余的推送方式，如：post、php、ruby等。

urlPath指包含每篇文章URL的文本文件，内容形式以下：

http://fqxyi.com/Hexo博客搭建.html
http://fqxyi.com/基本工具/Charles抓包.html
http://fqxyi.com/基本工具/图片压缩工具.html
...
// 此处省略其余自动生成的文章连接

那么如何自动生成这个文本文件呢？咱们能够在站点配置文件中这样配置：

baidu_url_submit:
  count: 100 # 好比3，表明提交最新的三个连接
  host: fqxyi.com # 在百度站长平台中注册的域名
  token: yourToken # 请注意这是您的秘钥， 请不要发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新连接会保存在此文本文档里

由于自动生成的baidu_urls.txt文件是存放在public文件夹下面的，因此urlPath的值为public/baidu_urls.txt。

Hexo博客搭建

GitHub建立与配置

建立GitHub帐号

Step1 Set up a personal account

Step2 Choose your plan

Step3 Tailor your experinece

配置GitHub相关信息

建立工程

偏好设置

配置SSH

安装Git与Node.js

安装Git

什么是Git

安装与校验

安装Node.js

什么是Node.js

安装与校验

Hexo搭建与配置

deploy

NexT主题安装与配置

如何设置网站背景

VPS(CentOS)搭建Hexo博客并配置Git

配置Nginx源配置文件

安装Nginx并校验

部署Nginx

配置站点解析配置文件

添加站点解析配置文件

配置防火墙并校验

启动Nginx服务

建立站点管理者

建立用户组及用户并校验

设置用户密码

设置fqxyi目录权限

给fqxyi用户添加sudo权限

建站测试

建立测试页面

预览测试页面

删除测试文件

安装配置Git

安装并验证Git

修改VPS上ssh的端口号

ssh远程登陆验证

使用普通用户(fqxyi)配置Git

配置Git仓库

初始化Git仓库

配置Git仓库

博客初始化与编译发布

修改站点配置文件_config.yml

发布到VPS服务器

MarkDown

FAQ

favicon不显示

404问题

干货

Wiki形式

禁止md文件生成html文件

百度主动推送

连接形式