hexo博客搭建

前言

在使用了WordPress、Halo等博客框架之后,决定将博客框架转向Hexo,首先WordPress和Halo的显得较为臃肿,对使用VPS的配置要求较高,难免会增加成本,并且编写markdown文件然后由配置生成页面的成就感明显大于在框架后台编写文章发布,所以我选择转向静态博客,至于Hugo和Hexo之间倒是很难抉择,考虑到在初期对性能没有那么大的要求,并且hexo的插件更加丰富,所以暂时选择hexo作为主题框架,如果后期有性能上的要求,也会考虑转向Hugo。

接下来我将介绍我搭建Hexo博客的历程,参考了Hexo官方文档,以及一些其他人的教程。

准备工作

Git的安装

我使用的是windows,在官网直接下载Git的安装程序,然后按步骤安装即可,可以在cmd输入git –version来检测是否安装成功,接下来我们在任何文件目录或者桌面右键打开Git Bash,然后就可以使用Git Bash(比cmd更好用的命令行工具,里面的命令基本类似于Linux,使用过Linux的用户可以很好上手)输入命令了。

Node.js的安装

Node.js 中文官网 下载安装即可,随后打开Git Bash,输入命令node -vnpm -v检查是否安装成功。

Hexo的安装

推荐阅读Hexo官方文档,里面有详细的安装和配置教程,这里简单介绍一下如何安装。

首先创建一个文件夹,用于存放项目文件以及文章,之后hexo的操作都在此文件夹中,进入到此文件夹中。

  1. 安装hexo:npm install -g hexo-cli
  2. 检查安装:hexo v
  3. 进入到博客文件夹目录中: cd PATH/TO/BLOG
  4. 初始化hexo项目: hexo init
  5. 生成项目:hexo g
  6. 启动本地服务器检查项目生成:hexo s;然后点击命令行中出现的地址跳转到浏览器。

将项目部署到服务器

一、使用github pages

github是一个远程代码仓库,其提供的pages功能是用于快速展示代码的demo,其提供了静态页面服务器以及免费的域名,我们可以使用这个功能来实现由hexo生成的静态页面的部署。

  1. 注册github账号,并创建一个名为“github用户名.github.io”的仓库

  2. 在本地的Git Bash中初始化你的用户名和邮箱

    git config --global user.name "你的Github用户名"

    git config --global user.email "你的Github邮箱"

  3. ssh连接(本地仓库连接到远程仓库)

    • 本地下载Github部署插件:npm install hexo-deployer-git --save

    • 本地生成获取密钥:

      生成密钥:ssh-keygen -t rsa -C "你的Github邮箱"

      获取复制密钥: cat ~/.ssh/.id_rsa.pub 复制命令行中显示的密钥值。

    • github填写密钥值:打开github->头像->setting->SSH and GPG keys,新建ssh,将复制的密钥值粘贴进去即可。

    • 验证ssh连接: ssh -T git@github.com

    在hexo文件夹中的_config.yml中配置一下基本配置,具体参考Hexo官方文档

    然后使用1.生成项目:hexo g ;2.部署项目:hexo d

    这样项目就被远程部署到github pages上,可以使用域名直接在浏览器中打开了(部署后可能需要等几分钟)。

二、使用VPS

直接使用Github pages的访问速度较慢,可以考虑自己购置云服务器(VPS)来部署博客项目,下面这几点就不做详细介绍了。

  • 选购VPS,开放80以及443端口。(略)
  • 在自己的VPS中选择创建一个目录作为项目目录。(略)
  • 购置一个域名,并解析到自己的VPS。(略)

由于部署的是静态页面,所以我们唯一要做的就是安装配置服务器,这里我选择nginx服务器。

安装配置nginx的教程也可以参考Nginx中文文档,这里也只做基本介绍。

  1. 安装nginx

    考虑到VPS大多是Linux系统,所以使用自带的软件包管理器(例如yum、apt)就可以安装nginx。例如apt update apt install nginx 即可。

  2. 配置nginx

    安装的nginx配置文件一般位于/etc/nginx下,使用文本编辑器打开配置文件vim /etc/nginx/nginx.conf ,在http中添加一个server。server的配置可参考如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    server {
    listen 80;
    listen [::]:80;
    server_name yourdomin;#填自己的域名或者IP
    root /PATH/TO/YOUR/BLOG;#你的博客项目存放位置
    location / {
    root /PATH/TO/YOUR/BLOG;
    index index.html index.htm;
    }
    }

    配置完后可以使用 nginx -t 测试配置,使用nginx -s reloadsystemctl restart nginx重启nginx,配置即可生效。

    现在浏览器中输入IP或者域名就会跳转nginx服务器代理的页面。

  3. 申请ssl证书

    不使用ssl加密的话,首先网站会不安全,其次很多浏览器会不支持。所以需要申请ssl证书。这里采用acme的脚本获取ssl证书并且自动更新证书。

    1. 下载并执行acme.sh

      curl https://get.acme.sh | sh

    2. 重启命令行

    3. 检测是否执行成功(即检测是否执行脚本中的创建链接)

      acme.sh -h(出现版本号即成功)

** 这里建议将默认的证书商改一下,不然连接不上
acme.sh --set-default-ca --server letsencrypt

  1. 签发证书(这里只介绍http验证,其余验证方式可以参考这篇文章

    acme.sh --register-account -m 你的邮箱 --issue -d 你的域名 --webroot 项目地址

  2. 将证书导入到nginx文件夹,选择你想要将证书储存的位置,输入到下列命令中的/path/to/keyfile/in/nginx/和/path/to/fullchain/nginx/中, 直接使用脚本命令:

    1
    2
    3
    4
    5
    6
    7
    acme.sh --installcert -d 你的域名 \

    --key-file /path/to/keyfile/in/nginx/youdomin.key \

    --fullchain-file /path/to/fullchain/nginx/fullchain.cer \

    --reloadcmd "service nginx force-reload"

然后再次配置nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 server {
listen 80;
listen [::]:80;
server_name yourdomin;#填自己的域名或者IP
rewrite ^(.*) https://$server_name$1 permanent;#跳转https
root /PATH/TO/YOUR/BLOG;#你的博客项目存放位置
location / {
root /PATH/TO/YOUR/BLOG;
index index.html index.htm;
}
}
server {
listen 443 ssl;
server_name yourdomin;#填自己的域名或者IP
root /PATH/TO/YOUR/BLOG;#你的博客项目存放位置
ssl_certificate /path/to/fullchain/nginx/fullchain.cer;#申请的ssl证书
ssl_certificate_key /path/to/keyfile/in/nginx/youdomin.key;#生成的密钥

ssl_session_timeout 10m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;

location / {
root /PATH/TO/YOUR/BLOG;
index index.html index.htm;
}

}
  重启nginx即可。
  1. 将项目文件传输至VPS。

    为了减少VPS的负担,我们把Hexo生成器安装在自己的个人电脑上,但是这样不可避免就产生了一个问题,如何将生成的hexo项目传到VPS的项目文件夹中,目前本人使用了如下一些方法。

    1. 直接使用WinSCP将项目文件copy到VPS中。

      这个方法很傻瓜式,只用使用WinSCP登录到VPS,然后将hexo/Public中的项目文件粘贴过去即可。但是传输速率较慢,操作不够优雅。

    2. git

      既然hexo有命令能将本地项目push到远程仓库,那我们可以

      • 使用hexo d部署到Github上
      • 然后在VPS中安装Git,将你的项目所在目录使用git init初始化为本地仓库,
      • 使用git pull 远程仓库地址即可将项目部署到VPS中

    关于这个问题,肯定还有更优雅的方式,我也会在网上借鉴别人的方案然后补充到此文章中。

主题的选择

主题是各有爱好的选择,这里也不作过多介绍,hexo官网有主题的安装文档,一般的主题也都有自己的使用文档,安装起来也很方便。

我选择的是Fluid主题

结语

至此博客部署已经结束,编写博客的流程:

  • markdown编辑器中撰写文章
  • 生成public项目(hexo clean,hexo g
  • 部署到服务器

hexo博客搭建
https://rainzz.cn/2024/04/13/hexo博客搭建/
作者
rainzz
发布于
2024年4月13日
许可协议