Hexo搭建静态博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

本文将简单介绍如何快速搭建一个Hexo,并部署到GitHub和云主机上。

运行环境搭建

Hexo博客的编译运行需要GitNode.js的支持,若电脑上没有安装,请

安装Git

请前往Git官网下载安装Git:https://git-scm.com/download
安装十分简单,均选择默认即可。

安装Node.js

请前往Node.js的官网下载安装:http://nodejs.cn/download/
安装时,请勾选Add to PATH选项。

安装Hexo

  运行环境搭建好了之后,首先在本地创建一个存放Hexo博客系统的文件夹blog,打开blog文件夹,右键选择Git Bash Here,在Git Bash中通过命令行下载并初始化Hexo:

  1. 安装hexo:

    1
    npm install -g hexo-cli
  2. 初始化hexo:

    1
    hexo init
    此时,我们的hexo博客系统就已经初步的搭建完成了。
    
  3. 生成博文

    1
    hexo generate
    也可简写成:
    
    1
    hexo g
  4. 本地调试预览
    安装hexo-server模块:

    1
    npm install hexo-server --save
    然后启动本地服务: 
    
    1
    hexo server
    此命令也可简写成:
    
    1
    hexo s

    打开浏览器,输入地址:http://localhost:4000 ,即可调试预览博客:

使用Next主题

本文中以Next主题为例,介绍如何使用主题.

  1. 下载主题

    如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。
    在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

    1
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 启用主题

    与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。

    1
    theme: next

    到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

  3. 验证主题

    首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug),整个命令是 hexo s --debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

    1
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

    此时即可使用浏览器访问 http://localhost:4000 ,检查站点是否正确运行。

发布博客

部署到GitHub

创建GitHub仓库

GitHub上注册账户,创建一个名称为usename.github.io(注:其中usename为你的用户名,不得使用其他命名)的仓库。

配置SSH链接

已经在GitHub上添加SSH Key的可以跳过此步骤,否则可以参考《github设置添加SSH》进行设置。
以下是添加步骤:

  1. 检查是否已经有 SSH key
    运行 git Bash 客户端,输入如下代码:

    1
    2
    $ cd ~/.ssh
    $ ls

    这两个命令就是检查是否已经存在 id_rsa.pubid_dsa.pub 文件,如果文件已经存在,可以直接跳过创建SSH Key,进行部署。

  2. 创建一个 SSH key

    1
    $ ssh-keygen -t rsa -C "your_email@example.com"
  3. 添加你的 SSH key 到 github上面去
    a、首先你需要拷贝 id_rsa.pub 文件的内容,你可以用编辑器打开文件复制,也可以用git命令复制该文件的内容,如:

    1
    $ clip < ~/.ssh/id_rsa.pub

    b、登录你的github账号,从又上角的设置( Account Settings )进入,然后点击菜单栏的 SSH key 进入页面添加 SSH key。
    c、点击 Add SSH key 按钮添加一个 SSH key 。把你复制的 SSH key 代码粘贴到 key 所对应的输入框中,记得 SSH key 代码的前后不要留有空格或者回车。

Hexo部署到GitHub

使用hexo deploy部署到GitHub:

  1. 安装hexo-deployer-git插件

    1
    $ npm install hexo-deployer-git --save
  2. 在Hexo配置文件_config.xml中作如下修改:

    1
    2
    3
    4
    deploy:
    type: git
    repo: git@github.com:usename/username.github.io.git
    branch: master
  3. 部署

    1
    $ hexo deploy

    该命令也可简写成:

    1
    $ hexo d

自定义访问域名

部署到GitHub上之后,即可通过https://username.github.io 进行访问,如果有自己的域名,可以同过以下方法绑定:

  1. 新建CNAME文件
    内容为自定义的域名,将CNAME文件放到\themes\next\source即主题文件夹下的source文件夹中。
  2. 推送到GitHub
    使用hexo d -g生成并部署到GitHub。
  3. 设置域名解析
    前往域名解析商,添加CNAME解析,将自定义的域名解析到GitHub。如下所示为腾讯云的域名解析设置,记录值usename.github.io为GitHub提供的默认域名:

    注:设置自定义域名后将不能通过GitHub默认域名进行访问。

部署到云服务器

部署到云服务器很简单,只需要将生成的public文件夹的内容拷贝到服务器的网站根目录下即可。在这里,再介绍一种使用git的方法将Hexo部署到云服务器上。

安装Git

本文中使用的云服务器为腾讯云主机,操作系统为CentOS 6.5,安装Git可以通过以下两种方法安装:

方法一:yum安装

使用yum安装Git十分简单:

1
# yum install git

方法二:编译安装

  1. 安装依赖包

    1
    2
    # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
    # yum install gcc perl-ExtUtils-MakeMaker
  2. 下载解压

    1
    2
    3
    # cd /usr/src
    # wget https://codeload.github.com/git/git/tar.gz/v2.12.0
    # tar -zxvf git-2.12.0.tar.gz
  3. 编译安装

    1
    2
    3
    4
    5
    # cd git-2.12.0
    # make prefix=/usr/local/git all
    # make prefix=/usr/local/git install
    # echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/bashrc
    # source /etc/bashrc
  4. 安装完成

    1
    2
    # git --version
    git version 2.12.0

创建git用户

1
2
3
4
# useradd -m git # 创建 git 用户,也可以用 adduser
# passwd git # 设置密码
# chmod 740 /etc/sudoers #将新建的用户添加sudo权限
# vi /etc/sudoers

添加以下内容:

1
git ALL=(ALL) ALL

导入用户的公钥

  1. 查询本地ssh
    以windows下为例,打开Git Bash,输入cd ~/.ssh,如果返回“… No such file or directory”,说明没有生成过SSH Key。则使用4中方法生成,否则按照2~3中方法查询公钥。
  2. 若已存在ssh密钥对,则输入cat id_rsa.pub,将查询到的结果复制下来,在服务器端,使用root用户:
    创建.ssh文件夹:

    1
    mkdir /home/git/.ssh

    新建authorized_keys

    1
    vim /home/git/.ssh/authorized_keys

    将查询的id_rsa.pub信息粘贴到authorized_keys

  3. 修改authorized_keys用户组权限

    1
    chown git:git -R /home/git/.ssh
  4. 生成新的Key(若第一步查询,已存在ssh密钥对,则可以跳过此步骤):

    1
    ssh-keygen -t rsa -C "your_email@youremail.com" (引号内的内容替换为你自己的邮箱)

    输出显示:

    1
    Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):

    直接回车,不要修改默认路径。

    1
    Enter passphrase (empty for no passphrase): Enter same passphrase again:

    设置一个密码短语,在每次远程操作之前会要求输入密码短语!闲麻烦可以直接回车,不设置。

初始化服务器端的仓库

创建一个目录作为Git仓库,切换到root用户,执行

1
mkdir /var/www/html/hexo.git

然后给文件夹赋予git用户组权限:

1
chown git:git -R /var/www/html/hexo.git

同时给博客根目录赋予git用户组的权限,以便git能够写入(本文中为hexo文件夹):

1
chown git:git -R /var/www/html/hexo

切换到git用户,初始化git仓库,执行:

1
2
su git
git init --bare /var/www/html/hexo.git

配置git hooks

新建并编辑刚刚初始化过的仓库里的hooks/post-receive

1
vim /var/www/html/hexo.git/hooks/post-receive

输入如下内容:

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/var/www/html/hexo.git #git仓库
TMP_GIT_CLONE=/tmp/hexo
PUBLIC_WWW=/var/www/html/hexo #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

然后赋予该文件可执行权限:

1
chmod +x post-receive

此文件用于每次push之后,将git仓库中的静态博客复制到网站根目录下。
还需新建一个/tmp/hexo文件用于交换数据,同样应赋予git用户组权限,切换到root用户,执行:

1
2
mkdir /tmp/hexo
chown git:git -R /tmp/hexo

Hexo中配置

在hexo配置文件中修改deploy:

1
2
3
4
5
6
deploy:
type: git
repo:
github:
vps: git@vps的ip地址:/var/www/html/hexo.git
branch: master

然后就可以使用hexo g将博客部署到云服务器上。

注:这里如果发生以下错误:

1
2
FATAL Host key verification failed.
fatal: Could not read from remote repository.

请检查/etc/ssh/sshd_config,开启了:

1
2
3
RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile .ssh/authorized_keys

保存后重启sshd:

1
service sshd restart

Hexo部署到云主机

通过以上的配置,同样通过hexo d即可将生成的博客推送到云主机上。同时配置GitHub和vps可以将博客同步地发布到GitHub Pages和云主机上。

若本文对您有帮助,请打赏鼓励本人!
---------------- End ----------------
扫二维码
扫一扫,使用手机查看

扫一扫,使用手机查看

QQ