Hexo+GitHub搭建个人博客
背景知识
什么是GitHub?
GitHub Pages
是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。- About GitHub Pages
什么是Hexo?
什么是Git?
- GIT(分布式版本控制系统),git支持分布式部署,可以有效、高速的处理从很小到非常大的项目版本管理。分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一个完整的Git仓库。
- Git教程
什么是Node.js
Node.js就是一个用于创建服务器端应用程序的运行系统,它可以轻松构建网络或其他事件驱动的应用程序服务器。Hexo+GitHub文章发布原理
在本地撰写 Markdown 格式文章后,通过 Hexo 解析文档,渲染生成具有主题样式的 HTML 静态网页,再推送到 GitHub 上完成博文的发布。SSH运行原理及应用
- 需要使用SSH提供的公钥,可以省去hexo d命令时的密码登录.
- SSH运行原理及应用
Markdown标记语言
- Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。文档后缀为 .md, .markdown。
- Markdown API||Markdown语法手册
环境搭建
Node.js
- Hexo 基于 Node.js,搭建过程中还需要使用 npm(Node.js 已带) 和 git,因此先搭建本地操作环境,安装 Node.js 和 Git。
Git
1 | node -v |
1 | npm -v |
1 | git --version |
回车,出现程序版本号即可。
注意:如果出现"npm"
不是内部指定,说明环境变量没配好,Node.js文件目录复制路径到Path中即可
安装Hexo
- 使用换源指令从阿里源下载Hexo
1 | npm config set registry https://registry.npm.taobao.org |
1 | cnpm install -g hexo-cli |
Hexo搭建
- 创建文件夹,名字随便取,比如我的是
C:\blog\lzyblog
,这个文件夹就是存放代码的地方。
1 | cd /c/blog/lzyblog |
- 在文件夹下右击“Git Bash Here”执行以下命令
1 | hexo init #创建一个新的hexo项目放在所创建文件夹下 |
hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:
1 | hexo g #生成 |
执行后在浏览器中输入”
localhost:4000/
“,就可以看到博客界面,按ctrl+c
关闭本地服务器
若出现端口被占用,请戳Windows下如何查看某个端口被谁占用修改博客
文件名/source/_posts/xxxx.md
中修改博客,修改后操作
1 | hexo new xxx #新建一篇标题为xxx的文章 |
部署到GitHub
注册登录GuiHub
注意用户名与网址访问域名要一致创建GuiHub库(new repository)
新建一个名为你的用户名.github.io
的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了。
创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。
配置SSH key
为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题,利用SSH登录远程主机。
登录方式有两种:
- 口令登录
- 公钥登录
- 区别:口令登录每次都要输入密码,公钥登录不需要输入密码.
安装了 Git Bash,自带了 SSH。检验一下是否安装 SSH,我们在新建的文件夹中右键打开 Git Bash输入命令:
1 | cd ~/. ssh #检查本机已存在的ssh密钥 |
- 如果提示:No such file or directory 说明你是第一次使用git。
1 | git config --global user.name "Gitub用户名" |
- 然后检查SSH安装和生成密匙
1 | ssh |
敲四次回车就会生成两个文件,分别为秘钥 id_rsa 和公钥
id_rsa.pub.
(注意:git中的复制粘贴不是 Ctrl+C 和 Ctrl+V,而是 Ctrl+insert 和 Shift+insert.)文件的位置在 Git Bash 上面都有显示,默认生成在以下目录:- Linux 系统:~/.ssh
- Mac 系统:~/.ssh
- Windows 10 :C:/Users/ASUS/.ssh
然后复制公钥
id_rsa.pub
文件里的内容,如果找不到可以通过命令查找
1 | cd ~/.ssh #检查本机已存在的ssh密钥 |
添加到Github
- 进入GitHub主页,点击右上角。再点击setting->SSH and GPG keys->New SSH key->将复制的id_rsa.pub内容粘贴到key内点击Add SSH key
1 | ssh -T git@github.com #验证是否成功 |
部署插件
1 | cnpm install --save hexo-deployer-git |
_config.yml
- 配置
_config.yml
中有关deploy的部分:(推荐使用sublime Text)
1 | deploy: |
1 | hexo d #部署到Github |
修改博客
目录构成
- 打开文件夹,可以看到博客的目录结构如下:
node_modules是node.js各种库的目录
public是生成的网页文件目录
scaffolds里面就三个文件,存储着新文章和新页面的初始设置
source是我们最常用到的一个目录,里面存放着文章、各类页面、图像等文件
themes存放着主题文件,一般也用不到。
我们平时写文章只需要关注source/_posts这个文件夹就行了。
通过文件名
\source\_posts
目录下xxx.md
文件修改
1 | hexo clean #清除缓存 |
- 修改提交时创常见问题
发现peployer不存在
,需要重新引入部署插件:
1 | cnpm install --save hexo-deployer-git |
修改主题
- 登录Hexo网址:https://hexo.io/themes/
- 本人比较喜欢:hexo-theme-butterfly
1 | cd /c/blog/lzyblog |
- 部署完后需要在博客主文件
_config.yml
中配置:
1 | theme: butterfly #主题名 |
常见问题
- Hexo更改主题后启动服务器,界面显如下字符:
1 | extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial |
- 解决方案
1 | npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive |
- 清除缓存
1 | hexo clean |
- 生成静态文件即可
1 | hexo g |
- 安装或者切换主题后 hexo s 打开 http://localhost:4000/ 后抱错
1 | extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug |
- 原因:未安装 pug 依赖和渲染插件依赖
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
- 关于Butterfly主题优化可以看我的另一篇文章!Butterfly主题魔改!
Hexo错误:spawn failed
参考Hexo错误:spawn failed的解决方法:https://blog.zhheo.com/p/128998ac.html
参考
感谢CodeSheep大佬带我入坑