返回
Featured image of post Github Pages + Hexo 搭建个人博客

Github Pages + Hexo 搭建个人博客

Hexo是一款流行的开源静态网站生成器,使用Node.js编写。

Hexo是一款流行的开源静态网站生成器,使用Node.js编写。它旨在使用基于Markdown的语法创建快速简单的博客、作品集和个人网站。Hexo生成静态HTML文件,可部署到任何Web服务器上,使发布内容变得简单而不需要服务器端应用程序。Hexo的一些功能包括强大的插件系统、主题和支持GitHub Pages、GitLab Pages和Netlify。Hexo正在积极维护,并拥有一个庞大的贡献者和用户社区。

配置安装环境

  1. 修改配置文件:(不要用windows的记事本),推荐使用Sublime Text3
  2. 下载Git:Git
  3. 下载Node.js:Node.js
  4. 查看环境安装是否成功:node -v 出现版本号,npm -v 出现版本号,git –version 出现版本号
  5. 如果node -v 报错的话,那么将Node.js的安装路径加到环境变量中。
  6. 设置npm的镜像源:查看npm的配置
#查看npm的配置
npm config list
#默认源
npm config set registry https://registry.npmjs.org
#临时改变镜像源
npm --registry=https://registry.npm.taobao.org
#永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
#另一种方式,编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

本地安装hexo静态博客框架

hexo框架安装初始化

新建一个文件夹,比如BolgTest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择Git Bash Here,然后依次输入如下命令:

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>
npm install  # 安装博客所需要的依赖文件  

生成运行

#生成Hexo页面
hexo g
#启动服务
hexo s

浏览器中打开http://localhost:4000或者127.0.0.1:4000,可以看到一个网页,说明Hexo博客已经成功在本地运行。

主题选择个性化修改

选择主题:在github上找套自己喜欢的主题,下在完解压到<blog安装路径>/themes/下。

站点配置修改在<blog安装路径>/_config.yml,主题配置文件在<blog安装路径>/themes/<>

本博客采用 butterfly 主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
#或者
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

应用站点

修改站点配置文件_config.yml,把主题改为 butterfly theme: butterfly

个性化修改前安装插件

个性化修改前安装插件

安装 pug 以及 stylus 渲染器插件

npm install hexo-renderer-pug hexo-renderer-stylus --save

安装将要用到的插件插件

注脚插件(可选): hexo-reference,reference 插件说明。

部署插件 (必要): hexo-deployer-git

npm install hexo-wordcount hexo-wordcount hexo-generator-search hexo-reference hexo-deployer-git --save

美化参考

Xpand的hexo主题配置

感谢以下博客提供的学习参考

Butterfly 安裝文檔(一) 快速開始

Butterfly 安裝文檔(二) 主題頁面

Butterfly 安装文档(三) 主题配置

Butterfly 安装文档(四) 主题配置

Butterfly 主题更新总结

Hexo博客之butterfly主题优雅魔改系列

Hexo 大结局

推送到GitHub

注册GitHub账号

  1. 注册GitHub账号

  2. 新建仓库,仓库名为你的用户名.github.io

git配置

  • 安装成功后,将 git 与 GitHub 账号绑定,右键打开 Git Bash,然后设置配置信息:
  • img
    img
# 配置用户名和邮箱
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱"
  • 接着生成 ssh 密钥文件,输入如下命令后直接三次回车即可,一般不需要设置密码;
# 生成 ssh 密钥
ssh-keygen -t rsa -C "github 注册邮箱"
  • 一般执行上述命令之后,会生成 id_rsa 和 id_rsa.pub 两个文件,前者是我们私有的,而后者则是对外开放的。接着找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥,将内容复制;

img
img

  • 然后打开 GitHub-Settings-Keys 页面,创建一个新的 SSH key,填写 Title 和 Key,Title 可以随意,而 Key 的内容则是我们刚才复制的 id_rsa.pub 中的内容,最后点击 Add SSH key 即可;

img
img
c盘得到的id_rsa.pub文件就是key,登了github添加即可

  • 改 hexo 根目录下的文件_config.yml 中的 deploy,添加仓库地址
deploy:
  type: git
  repo:
      github: git@github.com:xiaopengand/xiaopengand.github.io.git
  branch: master
  • 生成并上传仓库
hexo g -d
  • 如果没有 hexo-deployer-git,安装
npm install hexo-deployer-git --save

域名解析

域名解析成功,但显示404

在博客目录下/soure/文件下创建一个CNAME的文件,文件内容填你的域名地址 例如我的:

xxx.top
Built with Hugo
Theme Stack designed by XiaoWanSM