0%

使用Hexo+Nginx+Git搭建个人博客

平时记录主要用Markdown,付费多年的阿里云主机太贵,一个没人访问的小破站实在是支撑不起。但是在我停了半年后,居然推出了特价机,我又回来了。

之前用的WordPress太臃肿,不好用。这次干脆用Hexo+Git自动生成静态页面。

Hexo安装

环境准备

  依赖安装

1
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker -y

  下载解压

1
2
3
cd /usr/local/src
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar -zxvf git-2.9.5.tar.gz

  编译安装

1
2
3
cd git-2.9.5
make prefix=/usr/local/git all
make prefix=/usr/local/git install
  • Hexo初始化
1
2
3
4
5
6
7
npm install hexo-cli -g  #安装hexo
hexo -v #检查是否安装成功
cd youblogdir #在服务器上创建一个存放hexo博客的目录
hexo init #初始化hexo
npm install #npm安装
hexo s –g #hexo启动
#直接访问http://localhost:4000

  上述初始化成功后,在你创建的youblogdir目录下会出现如下文件:

1
2
3
4
5
6
node_modules:  #依赖包
public: #存放生成的页面
scaffolds: #生成文章的一些模板
source: #用来存放你的文章
themes: #放下下载的主题
_config.yml: #博客的核心配置文件(设置主体、标题等属性)

创建Git仓库

  网上大部分都是使用GitHub仓库,然后域名CNAME到GitHub仓库地址。
  我这边只是把Git仓库当成仓库而已,域名解析的还是我源站,通过nginx方式。

  • 配置Git仓库

  Git仓库我选择阿里的codeup,创建好后会生成克隆下载的一个链接

20240421170304

  • 推送到Git仓库

  打开youblogdir目录下_config.yml,找到deploy行,repo修改成上面仓库的链接

1
2
3
4
deploy:
type: git
repo: git@codeup.aliyun.com:65f65d3982cd9138e4d05bf3/yangfannie.git
branch: master
  • 安装插件

  要能在更新hexo后自动推送到你的Git仓库,需要安装一个插件:hexo-deployer-git

1
2
npm install hexo-deployer-git --save
hexo g -d #更新且推送到github

Nginx安装

  Nginx这边选用的是阿里的tengine。
  安装配置参考:

域名解析

  登陆到你购买域名服务器(比如我在阿里云),配置域名解析,将其指向我们服务器的公网地址。

发布博客

  在youblogdir目录下,执行下面命令新建一个页面

1
hexo new "Hello World"

  会在source/_posts下创建一个Hello World.md的文件,然后向里面添加想发布的内容

1
2
3
4
---
title: Hello World
---
Welcome to yangfannie blog

  最后一键三连更新文章,访问你的网站就可以看到这篇文章了

1
hexo clean && hexo g && hexo d

主题设置

主题选择

  Hexo的默认主题是landscape,不好看。
  NexT是hexo使用人数最多的主题,该主题共有4种可选方案,可以参考官网:https://theme-next.org
  更改hexo/themes/next/下的主题配置文件_config.yml,注意其文件名与站点配置文件相同;我这边选择了Mist样式

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

永久链接

  Hexo生成博客文章URL链接时,默认是:year/:month/:day/:title/这样的格式。如果博客文件名有中文的话,URL链接就会包含中文,复制URL路径把它粘贴到其他地方就会把中文变成一大堆乱码,使用不便而且会影响网站的SEO,同时链接层级太多也将影响SEO。
  网上设置永久链接的方式很多,我这边使用的是用文章创建日期生成链接
  在站点配置文件_config.yml中,找到permalink,进行如下设置

1
2
3
4
5
permalink: :layout/:year:month:day:hour:minute:second.html
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

  生成的URL如:

1
https://yangfannie.com/post/20240414210410.html

  如果末尾不需要带html,可以把pretty_urls下的2个设置为false。
  生成的URL如:

1
https://yangfannie.com/post/20240414210410

  带不带html对SEO收录来说,影响不大,但不带html发外链的时候,有些平台编辑器会自动在URL后面加一个“/ ”造成404页面。