这里我们使用 GitHub Pages 来搭建 Hexo 静态博客网站,其最吸引人的莫过于完全免费使用,并且非常稳定。
1.原理
GitHub Pages 是什么?
GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。
Hexo 是什么?
Hexo 是一个快速、简洁且高效的静态博客框架,它基于 Node.js 运行,可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。
Hexo + GitHub 文章发布原理
在本地撰写 Markdown 格式文章后,通过 Hexo 解析文档,渲染生成具有主题样式的 HTML 静态网页,再推送到 GitHub 上完成博文的发布。
2.环境安装
Hexo 基于 Node.js
,搭建过程中还需要使用 npm(Node.js 已带) 和 git
,因此先搭建本地操作环境,安装 Node.js 和 Git。
检查是否安装成功:进入终端,依次输入 node -v
、npm -v
和 git --version
并回车,出现程序版本号即可。
3.Github配置
3.1连接Github
右键 -> Git Bash Here,设置用户名和邮箱:
1 | git config --global user.name "GitHub 用户名" |
3.2创建 SSH 密匙添加到Github上
输入 ssh-keygen -t rsa -C "GitHub 邮箱"
,然后一路回车。
进入 [C:\Users\用户名.ssh] 目录(要勾选显示“隐藏的项目”),用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。
登陆 GitHub ,点击用户头像进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key。
Title 随便取个名字,粘贴复制的 id_rsa.pub 内容到 Key 中,点击 Add SSH key 完成添加。
验证连接:打开 Git Bash,输入 ssh -T git@github.com
出现 “Are you sure……”
,输入 yes 回车确认。显示 “Hi xxx! You've successfully……”
即连接成功。
3.3创建 Github Pages 仓库
GitHub 主页右上角加号 -> New repository:
- Repository name 中输入 用户名.github.io
- 勾选 “Initialize this repository with a README”
- Description 选填
填好后点击 Create repository 创建。
创建后默认自动启用 HTTPS,博客地址为:https://用户名.github.io
4.本地安装 Hexo 博客程序
4.1安装 Hexo
使用使用 npm 一键安装 Hexo 博客程序:
1 | npm install -g hexo-cli |
4.2 Hexo 初始化和本地预览
初始化并安装所需组件:
1 | hexo init # 初始化 |
完成后依次输入下面命令,启动本地服务器进行预览:
1 | hexo g # 生成页面 |
访问 http://localhost:4000 出现 Hexo 默认页面,本地博客安装成功!
Hexo 博客文件夹目录结构如下:
5. 部署 Hexo 到 GitHub Pages
首先安装 hexo-deployer-git:
1 | npm install hexo-deployer-git --save |
然后修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:
1 | deploy: |
完成后运行
1 | hexo d #部署到GitHub Pages |
将网站上传部署到 GitHub Pages。这时访问我们的 GitHub 域名 https://用户名.github.io
就可以看到 Hexo 网站了。
6.安装Next主题
进入网站目录打开 Git Bash Here 下载主题:
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
然后修改 hexo的 _config.yml
中的 theme
为新主题名称 next
。
7.遇到的问题</color>
1 | $ hexo d -g |
出现这些是因为node版本太高,切换成低版本的node来安装Hexo就可以了。
我安装的是 hexo: 4.2.0
node: 13.6.0
1 | $ hexo -v |