Hexo + GitHub 搭建免费博客

Question

第一部分 基本介绍

---

一直想自己搭建一个博客,断断续续,折折腾腾了两天多的多时间,终于算是搭建完毕了.

为什么要搭建博客呢?

• 想有个属于自己的博客空间
• 世面上的平台不够好看
• 佩服那些有博客的人,所以自己也想搞一个
• 独立的才是自己的。
• 但是不懂服务器,没有空间,不懂前端怎么破?

小白进入门槛
1、非常折腾，需要耐心；
2、也需要一定的学习能力和钻研精神；
3、懂一些网页基础知识

本博客是利用 Hexo +Github 搭建,主题是 Next ,感觉不错,不需要什么上面所说的知识,也能搭建成功,方便也美观

为什么选择 GitHub Pages？

很多人用 wordpress，你为什么要用 github pages 来搭建？

• github pages 有 300M 免费空间，资料自己管理，保存可靠；
• 学着用 github，享受 github 的便利，上面有很多大牛，眼界会开阔很多；
• 顺便看看 github 工作原理，最好的团队协作流程；
• github 是趋势；
• 就算 github 被墙了，我可以搬到国内的 gitcafe 中去。

搭建需要懂得 github 基本操作

不会 GitHub 的参考如下文章：

• 使用 Github Pages 建独立博客
• GitHub 的简单使用
• 史上最全 github 使用方法：github 入门到精通
• github 搭建动态网站

第二部分 Hexo+GitHub 搭建博客

---

环境准备

• 安装 Node
  到 Node.js 官网下载相应平台的最新版本，一路安装即可
• 安装 Git
• GitHub
  • 首先注册一个『GitHub』帐号，已有的默认默认请忽略
  • 建立与你用户名对应的仓库，仓库名必须为『your_user_name.github.com』
  • 添加 SSH 公钥到『Account settings -> SSH Keys -> Add SSH Key』

• 首先设置你的用户名密码：
  git config --global user.email "4353@qq.com"
git config --global user.name "653b"
• 生成密钥：
  ssh-keygen -t rsa -C "faa@qq.com"

  最后可以验证一下 ：ssh -T git@github.com

• 安装

Node 和 Git 都安装好后，可执行如下命令安装 hexo：

npm install -g hexo

• 初始化

执行 init 命令初始化 hexo 到你指定的目录：
hexo init <folder> 也可以 cd 到目标目录，执行 hexo init。

至此，全部安装工作已经完成！

• 生成静态页面

cd 到你的 init 目录，执行如下命令
hexo generate

• 本地启动

执行如下命令，启动本地服务，进行文章预览调试

hexo server
浏览器输入 http://localhost:4000 就可以看到效果

---

• 写文章

执行 new 命令，生成指定名称的文章至 hexo\source_posts\postName.md

hexo new [layout] "postName" #新建文章

其中 layout 是可选参数，默认值为 post。有哪些 layout 呢，请到 scaffolds 目录下查看，这些文件名称就是 layout 名称。当然你可以添加自己的 layout，方法就是添加一个文件即可，同时你也可以编辑现有的 layout，比如 post 的 layout 默认是 hexo\scaffolds\post.md

title: { { title } }
date: { { date } }
tags:

想添加 categories，以免每次手工输入，只需要修改这个文件添加一行，如下：

title: { { title } }
date: { { date } }
categories: 
tags: 
---

接下来，你就可以用喜爱的编辑器尽情书写你的文章

实现 fancybox 效果

只需要在你的文章*.md 文件的头上添加 photos 项即可，然后一行行添加你要展示的照片：

layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- https://www.wenjiangs.com/wp-content/uploads/2023/docimg26/832-p4ydeaky2h4.jpg
- https://www.wenjiangs.com/wp-content/uploads/2023/docimg26/834-0eyat12mayi.jpg

不想每次都手动添加怎么办？同样的，打开您的 hexo\scaffolds\photo.md

>layout: { { layout } }
title: { { title } }
date: { { date } }
tags: 
photos:

然后每次可以执行带 layout 的 new 命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章

• 主题安装

---

hexo 的主题列表 Hexo Themes 。
比较喜欢 pacman ， modernist 、next。Pacman 最为优秀，简洁大方小清新，同时移动版本支持的也很好

安装主题的方法就是一句 git 命令：

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

安装完成后，打开 hexo\_config.yml ，修改主题为 modernist

打开 hexo\themes\modernist 目录，编辑主题配置文件 _config.yml：

• 更新主题

cd themes/modernist
git pull

hexo 命令行使用

常用命令：

• hexo help #查看帮助
• hexo init #初始化一个目录
• hexo new "postName" #新建文章
• hexo new page "pageName" #新建页面
• hexo generate #生成网页，可以在 public 目录查看整个网站的文件
• hexo server #本地预览，’Ctrl+C’关闭
• hexo deploy #部署.deploy 目录
• hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy

简写：

• hexo n == h exo new
• hexo g == hexo generate
• hexo s == hexo server
• hexo d == hexo deploy

第三方服务

---

• 为 NexT 主题添加文章阅读量统计功能
• 为 hexo 添加多说评论
• 教你用 swiftype 为 Hexo 添加站内搜索

• 图床

1.墙裂推荐七牛云储存,注册地址。
2.七牛云储存提供 10G 的免费空间,以及每月 10G 的流量.存放个人博客图片最好不过了
具体使用见使用七牛作为 github 博客的图床

• 域名

• 将独立域名与 GitHub Pages 的空间绑定
• 方法一：在站点 source 目录下面，新建一个名为 CNAME 的文本文件，里面写入你要绑定的域名，比如 wuxiaolong.me
• 方法二：在 Repository 的根目录下面，新建一个名为 CNAME 的文本文件，里面写入你要绑定的域名，比如 wuxiaolong.us

• DNS 设置
  用 DNSpod，快，免费，稳定。
  注册 DNSpod，添加域名，如下图设置。

其中 A 的两条记录指向的 ip 地址是 github Pages 的提供的 ip
如何知道你的 github 上项目的 IP

去 Godaddy 修改 DNS 地址
更改 godaddy 的 Nameservers 为 DNSpod 的 NameServers。

至此，基本操作介绍完毕，以下内容普通用户无需了解

---

• 目录介绍

默认目录结构：

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

• .deploy：执行 hexo deploy 命令部署到 GitHub 上的内容目录
• public：执行 hexo generate 命令，输出的静态网页内容目录
• scaffolds：layout 模板文件目录，其中的 md 文件可以添加编辑
• scripts：扩展脚本目录，这里可以自定义一些 javascript 脚本
• source：文章源码目录，该目录下的 markdown 和 html 文件均会被 hexo 处理。该页面对应 repo 的根目录，404 文件、favicon.ico 文件，CNAME 文件等都应该放这里，该目录下可新建页面目录。
  • _drafts：草稿文章
  • _posts：发布文章
• themes：主题文件目录
• _config.yml：全局配置文件，大多数的设置都在这里
• package.json：应用程序数据，指明 hexo 的版本等信息，类似于一般软件中的关于按钮

• 修改局部页面

---

页面展现的全部逻辑都在每个主题中控制，源代码在 hexo\themes\你使用的主题\中，以 modernist 主题为例：

├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-CN.yml      #中文语言
├── layout             #布局，根目录下的*.ejs 文件是对主页，分页，存档等的控制
|   ├── _partial       #局部的布局，此目录下的*.ejs 是对头尾等局部的控制
|   └── _widget        #小挂件的布局，页面下方小挂件的控制
├── source             #源码
|   ├── css            #css 源码 
|   |   ├── _base      #*.styl 基础 css
|   |   ├── _partial   #*.styl 局部 css
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #*.styl 引入需要的 css 源码
|   ├── fancybox       #fancybox 效果源码
|   └── js             #javascript 源代码
├── _config.yml        #主题配置文件
└── README.md          #用 GitHub 的都知道

• 插件

---

• 安装插件： npm install <plugin-name> --save
• 启用插件：在*hexo_config.yml 文件添加：
• plugins: - <plugin-name> #插件名
• 升级插件： npm update
• 卸载插件： npm uninstall <plugin-name>

• 迁移
  hexo 支持从其他类型站点迁移，如通用 RSS，Jekyll，Octopress，WordPress 等。请参考官方文档 Hexo Migration 。

• 更新
  • 更新 hexo： npm update -g hexo
  • 更新主题： cd themes/你的主题 git pull

• 换机器写博客

---

保留好自己的博客源码。换机器写博客，就只能使用各种网盘的同步功能，或者你把你的站点源文件提交到某代码托管服务器。另外，貌似这篇很牛逼， Hexo 服务器端布署及 Dropbox 同步 。

办法是这样的，先在一个目录下做好 Node+Git+Hexo 的绿色环境，写个 hexos.bat 可以一键启动 hexo 工作台，把整个目录用 Dropbox 同步 ，这样随便在办公室或家的任何笔记本台式机都可以写博客，也不用处理什么文件拷贝备份的事情

问题详解

---

• hexo 部署至 Git 遇到的坑
• Hexo 常见问题解决方案

总结

---

• 对于一个不懂什么服务器，什么前端的人来说，Hexo+Github 给搭建个人博客带来了很大的便利
• 搭建博客不是心血来潮，也并不是一帆风顺的，所以需要耐心，折腾得起才行
• 很多教程已经过时，多看官方文档
• 搭建博客并不是必须，写笔记文章找个平台也是可以的
• 搭建博客才是第一步，坚持写好文章才是关键，路还很长

参考

• Hexo 官网
• Hexo + GitHub 博客搭建之旅
• 配置 - Hexo 中文版 - 极客学院 Wiki
• 零基础免费搭建个人博客-hexo+github
• 5 分钟快速安装 Next 主题
• Themes · hexojs/hexo Wiki
• Hexo 主题开发指南