Hexo+Github Pages搭建个人博客

出于好奇，估计很多新手也想拥有一个自己的博客，毕竟看起来还挺Cool。所以，我的第一篇正经文章就简单地讲一下基于Hexo和Github Pages怎么快速地搭建属于你的博客。写这个的时候参考了不少经验贴，本文相当于梳理和总结，希望小白也能上手实操。

简介

1.Hexo

Hexo，一个快速、简洁且高效的博客框架，支持 GitHub Flavored Markdown 的所有功能，只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

2.GitHub Pages

GitHub 是著名的开源及私有软件项目的托管平台，而 GitHub Pages 可以把托管在 GitHub 上的静态网站实时显示出来，并提供了一个免费的域名。

准备阶段

必备工具：Hexo、Git、Node.js、npm

平台：Windows（本文以win10为例）

1.安装Node.js

进入Node.js下载对应安装包，建议推荐版本v16.15.1，双击安装，一路回车就好，会自动安装npm，并配置好环境变量。安装完打开cmd，输入以下命令验证，输出版本号即成功：

node -v
npm -v

2.安装Git

没有Github账号先注册一个，然后进入Git，下载Git并安装，cmd验证安装

git --version

绑定Github账号：

git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"

配置SSH秘钥：为了免去每次都输入密码的步骤，采用ssh登录，具体流程：首先在本地生成公私钥对，然后将公钥放置在Github上，之后git push等操作就可以保证安全性。先在本地生成公私钥：

ssh-keygen -t rsa -C "你的邮箱"

连续回车后，根据打印信息找到公钥位置，默认文件名为id_rsa.pub，记事本打开，复制所有内容。

打开 GitHub SSH key 页面，点击 New SSH Key，文件名随意，把复制的内容粘贴到文本框中并保存。验证：

ssh git@github.com

3.安装Hexo

安装完npm就简单了，命令行安装并验证：

npm install -g hexo-cli
hexo -v

创建一个新文件夹作为博客的工作目录，如MyBlog，然后cmd进入该目录，进行初始化操作：

cd MyBlog
hexo init test-blog
cd test-blog

test-blog的目录情况如下

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml是核心配置文件，后面要经常编辑，参数详解。至此，博客搭建的主要准备工作就完成了！

博客配置

刚刚完成的初始化博客，外观什么的可能不咋好看。不用担心，Hexo提供了许多主题模板，好心人还是多啊。通过预览可以选择自己喜欢的，我比较懒就直接选择了第一个ayer主题。

仍然可以通过npm安装：

cd MyBlog\test-blog
npm i hexo-theme-ayer -S

安装完后会在根目录下生成_config.ayer.yml文件，直接编辑修改即可。

虽然命令行比较简单，不过还是建议把整个主题的源文件拷贝下来，放在themes中统一管理。为啥呢？因为如果要加一些新的功能，比如提交站点检索（这个后面会更新），需要修改源文件才可以实现。

git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

修改根目录下的_config.yml，不要跟上面的主题配置文件_config.ayer.yml混淆！

编辑theme字段：

theme: ayer #landscape(默认的)

然后修改_config.ayer.yml，控制主题外观。不同字段的介绍非常清楚了，可根据爱好针对性调整，下面这个是我自己用的，建议把logo等图像都换一下，当然还有打赏的收款二维码，我当然也不介意直接用我的了:) ）。

# 侧边栏菜单
menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
  关于我: /about

# 网站图标和侧边栏logo
favicon: /logo.png #/favicon.ico
logo: /logo.png #/images/ayer-side.svg

# 封面配置
# enable-是否启用封面；path-封面背景图；logo-封面logo
cover:
  enable: true
  path: /images/cover4.jpg # /source/images目录下附送多张美图，可更换
  logo: false #/images/ayer.svg，如果不要直接设置成false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: "请我喝杯咖啡吧~"
# 支付宝二维码图片地址，跟你设置logo的方式一样。比如：/images/alipay.jpg
alipay: /images/alipay.jpg #https://tvax4.sinaimg.cn/large/9156bd04ly1gzofeba4nlj208c08c3z9.jpg
# 微信二维码图片地址
weixin: /images/wxpay.jpg #https://tvax4.sinaimg.cn/large/9156bd04ly1gzofeo49ywj208c08cgmz.jpg

# GitHub Ribbons-封面右上角的forkme，换样式直接在source/images目录下替换forkme图片
github:
  # (关闭请设置为false)
  enable: false
  url: https://github.com/shijun18

# 网站成立年份(默认为 2019，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
since: 2022

# 4、MiniValine
# See: https://github.com/MiniValine/MiniValine
minivaline:
  enable: false
  serverURL: https://minivaline.your-domain.com
ads:

原主题menu栏目比较多，我只保留了几个，其中categories、tags和about，需要创建new page，以categories为例：

hexo new page categories

然后，将下面的代码粘贴至/source/categories/index.md

---
title: categories
type: categories
layout: "categories"
---

tags和about类似操作即可。具体的可以参考教程

至此，博客的主题配置也差不多了，博客颜值起码提高了一个数量级，还是得感谢好心人(shen-yu)给我们这么好的白嫖资源👍。

博客搭载

当然，我们的最终目的是把博客搭载到Github Pages上，首先在github创建一个public仓库，命名为你的github账号.github.io，比如我的用户名是shijun18，仓库名就是shijun18.github.io。然后修改_config.yml主要字段即可，如下：

# Site
title: Jun's Blog
subtitle:
description: Code Create Life.
keywords:
author: Shi Jun
language: zh-CN
timezone: 

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://shijun18.github.io/

deploy:
  type: git
  repo:  git@github.com:shijun18/shijun18.github.io.git 
  branch: master
  message: 

博文创建和发布

利用hexo创建博文非常简单，例：

hexo new post 'hello-world'

编辑完_post文件夹下的相应.md文件，博文发布只需三连即可：

hexo g[enerate]

自动生成相应文件。

hexo s[erver] 

用于本地预览，因为直接发布到Github Pages有一定的延迟，对实时编辑不友好，所以建议先本地预览，完善后再发布。

hexo d[eploy]

博文发布到网站。

OK，大功告成，可以愉快地写博客了😆

打赏