背景知识

  • 什么是GitHub?

    • GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。
    • About GitHub Pages
  • 什么是Hexo?

    • Hexo 是一个快速、简洁且高效的静态博客框架,它基于 Node.js 运行,可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。
    • Hexo官网||Hexo工作原理
  • 什么是Git?

    • GIT(分布式版本控制系统),git支持分布式部署,可以有效、高速的处理从很小到非常大的项目版本管理。分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开发者通过克隆(git clone),在本地机器上拷贝一个完整的Git仓库。
    • Git教程
  • 什么是Node.js
    Node.js就是一个用于创建服务器端应用程序的运行系统,它可以轻松构建网络或其他事件驱动的应用程序服务器。

  • Hexo+GitHub文章发布原理
    在本地撰写 Markdown 格式文章后,通过 Hexo 解析文档,渲染生成具有主题样式的 HTML 静态网页,再推送到 GitHub 上完成博文的发布。

  • 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
2
$ cnpm install -g hexo-cli
$ hexo -v

Hexo搭建

  • 创建文件夹,名字随便取,比如我的是C:\blog\lzyblog,这个文件夹就是存放代码的地方。
1
$ cd /c/blog/lzyblog
  • 在文件夹下右击“Git Bash Here”执行以下命令
1
$ hexo init   #创建一个新的hexo项目放在所创建文件夹下

hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:

1
2
$ hexo g	#生成
$ hexo s #为hexo在本地起一个http server
  • 执行后在浏览器中输入”localhost:4000/“,就可以看到博客界面,按ctrl+c关闭本地服务器

    若出现端口被占用,请戳Windows下如何查看某个端口被谁占用

  • 修改博客
    文件名/source/_posts/xxxx.md 中修改博客,修改后操作

1
2
3
4
$ hexo new xxx  #新建一篇标题为xxx的文章
$ hexo clean #清除缓存
$ hexo g #生成将要发布的博客网站包含html在内的静态资源
$ hexo s

部署到GitHub

  • 注册登录GuiHub
    注意用户名与网址访问域名要一致

  • 创建GuiHub库(new repository)
    新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了。
    创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。

配置SSH key

  • 为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题,利用SSH登录远程主机。

  • 登录方式有两种:

    1. 口令登录
    2. 公钥登录
    3. 区别:口令登录每次都要输入密码,公钥登录不需要输入密码.
  • 安装了 Git Bash,自带了 SSH。检验一下是否安装 SSH,我们在新建的文件夹中右键打开 Git Bash输入命令:

1
$ cd ~/. ssh #检查本机已存在的ssh密钥
  • 如果提示:No such file or directory 说明你是第一次使用git。
1
2
$ git config --global user.name "Gitub用户名"
$ git config --global user.email "GitHub邮箱"
  • 然后检查SSH安装和生成密匙
1
2
$ ssh
$ ssh-keygen -t rsa -C "GitHub邮箱"
  • 敲四次回车就会生成两个文件,分别为秘钥 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
2
3
$ cd ~/.ssh  #检查本机已存在的ssh密钥
$ ls
$ cat id_rsa.pub

添加到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
2
3
4
deploy:
type: git
repo: https://github.com/lzyblog/lzyblog.github.io (仓库url)
branch: master
1
$ hexo d #部署到Github

修改博客

目录构成

  • 打开文件夹,可以看到博客的目录结构如下:

  • node_modules是node.js各种库的目录

  • public是生成的网页文件目录

  • scaffolds里面就三个文件,存储着新文章和新页面的初始设置

  • source是我们最常用到的一个目录,里面存放着文章、各类页面、图像等文件

  • themes存放着主题文件,一般也用不到。

  • 我们平时写文章只需要关注source/_posts这个文件夹就行了。

  • 通过文件名\source\_posts目录下xxx.md文件修改

1
2
3
4
$ hexo clean #清除缓存
$ hexo s #可在本地预览
$ hexo g #部署
$ hexo d #提交Github
  • 修改提交时创常见问题
    发现peployer不存在,需要重新引入部署插件:
1
$ cnpm install --save hexo-deployer-git

修改主题

1
2
3
4
5
6
7
$ cd /c/blog/lzyblog
#git clone 主题url.git themes/主题名
$ git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
$ hexo clean
$ hexo g
$ hexo s #预览
$ hexo d
  • 部署完后需要在博客主文件_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
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

Hexo错误:spawn failed

参考Hexo错误:spawn failed的解决方法:https://blog.zhheo.com/p/128998ac.html

参考

感谢CodeSheep大佬带我入坑