GitHub+Hexo创建博客
填坑并优化细节描述…(这篇是2.0新版,处理了上一篇的某些错误,加强了稳定性和细节,so,我是最快最强哒!!!)
如何用Hexo和GitHub制作出个人博客(超详细小白版)
我觉得使用一个工具之前,要先了解这个工具
当然,这个所谓的“Hexo”和”GitHub”也一样
先看一段Hexo的官方定义:
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
关键词:博客框架、Markdown
然后是GitHub的:
GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名 GitHub。
关键词:开源、托管平台、Git
…
接下来,我会直接给出以上关键词的含义,不过度娘也有,看不懂我这个的可以去翻翻度娘
- 博客框架:做博客都需要的框架,一般来说找一个稳定主流的就行,比如我们本文用到的Hexo
- Markdown:一种标记语言,后缀名为.md
- 开源:指编写此软件/程序的代码全部公开的行为
- 托管平台:如果你没有自己单独的域名的话,某些网站会在它自己的域名下面替你建立一个子域名,比如本教程用到的GitHub
- Git:是一个带有版本管理的分布式控制系统
简单来说就是我们编写后缀名为.md的markdown文件,然后由Hexo这个博客框架解析成界面,再由GitHub 的pages服务帮我们挂载到相应的GitHub域名的二级域名下
Q:那GitHub的pages服务又是什么呢?
A:GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。
优点和不足
优点:完全免费;静态站点,轻量快速;可按需求自由定制改造;托管在 GitHub,安全省心;迁移方便……
不足:发文不便,依赖于本地环境;更适合个人博客使用;GitHub 在国内访问速度有点不快。
准备事项以及注意事项:
- 输入代码统一用英文输入法,不然会发生意外情况
- 本教程代码操作通体使用Git Bash进行输入操作
了解了基础的知识,那我们开始教程:
环境搭建
准备
由于Hexo是由Node.js搭建而成,所以我们需要在本地电脑上安装Node.js,且上面说过代码需要使用Git Bash进行输入操作,所以必备工具Git也需要下载到你的本地电脑上,下面就是他们各自的官网,下载安装下一步即可:
Node.js:官网(建议选择LTS长期稳定版)
Git:官网(这个直接根据电脑系统安装Windows/macOS/Linux/Unix即可)
安装完成后,Win+R 输入 cmd 并打开,依次输入 node -v
、npm -v
和 git --version
并回车,出现版本号即可(最后那个git -version如果出现’git’ 不是内部或外部命令,也不是可运行的程序
或批处理文件基本也没问题,查看鼠标右键菜单有无Git Bash Here,有即可)
连接GitHub
1.首先打开GitHub官网,输入相关信息并注册
2.桌面右键 -> Git Bash Here,设置用户名和邮箱:
1 | git config --global user.name "GitHub 用户名" |
创建 SSH 密匙:
输入 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,得到一个SSH密钥
验证连接:
打开 Git Bash,输入 ssh -T git@github.com
出现 “Are you sure……”,输入 yes 回车确认。
显示 “Hi xxx! You’ve successfully……” 即连接成功。
创建 Github Pages 仓库
Github主页右上角加号→New repository:
- Repository name 中输入
用户名.github.io
- 勾选 “Initialize this repository with a README”
- Description 可以选填
创建后默认自动启用 HTTPS,博客地址为:https://用户名.github.io
安装Hexo
桌面右键点击“Git Bash Here”进入小黑框
使用 npm 一键安装 Hexo 博客程序:
1 | npm install -g hexo-cli |
Mac 用户需要管理员权限(sudo),运行这条命令:
1 | sudo npm install -g hexo-cli |
倒数第二行出现一个+ hexo-cli@版本号格式的一句话就表明你已经安装成功了
关闭桌面的这个小黑框
创立博客文件夹并安装依赖and初始化
在你电脑的任何一个盘里创建一个用于存放博客本地文件的文件夹
例如在D盘里新建一个hexo文件夹,里面新建一个“blog”文件夹用于存放博客资源
在blog文件夹内部**(注意不是hexo里面,而是hexo里面的blog)**
blog文件夹也可以称为“博客根目录”
右键“Git Bash Here”打开博客文件夹里这个小黑框
初始化并安装所需组件:
1 | hexo init # 初始化 |
完成后依次输入下面命令,启动本地服务器进行预览:
1 | hexo g # 生成页面 |
访问 http://localhost:4000
,出现 Hexo 默认页面,本地博客安装成功!
Tips:如果出现页面加载不出来,可能是端口被占用了。Ctrl+C 关闭服务器,运行
hexo server -p 5000
更改端口号后重试。
Hexo 博客文件夹目录结构如下:
部署 Hexo 到 GitHub Pages
本地博客测试成功后,就是上传到 GitHub 进行部署,使其能够在网络上访问。
首先安装 hexo-deployer-git:
1 | npm install hexo-deployer-git --save |
然后修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:
1 | deploy: |
完成后运行 hexo d
将网站上传部署到 GitHub Pages。
完成!这时访问我们的 GitHub 域名 https://用户名.github.io
就可以看到 Hexo 网站了。
开始使用
发布文章
进入博客所在目录,右键打开 Git Bash Here,创建博文:
1 | hexo new "My New 0ne_Post" |
然后 source 文件夹中会出现一个 My New one_Post.md 文件,就可以使用 Markdown 编辑器在该文件中撰写文章了。
写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。
1 | hexo g # 生成页面 |
也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可,写完后运行 hexo g
和 hexo d
发布。
上面的命令是不是很长,其实也可以把它们压缩成一句话:
1 hexo g -d #生成页面并发布
文章格式的示范↓:
1 | --- |
文章可以拥有如下属性:
- | Setting | Description | Default |
---|---|---|---|
1 | layout | Layout | post或page |
2 | title | 文章的标题 | |
3 | date | 创建日期 | 文件的创建日期 |
4 | updated | 修改日期 | 文件的修改日期 |
5 | comments | 是否开启评论 | true |
6 | tags | 标签 | |
7 | categories | 分类 | |
8 | permalink | url中的名字 | 文件名 |
一般带有文章头图的博客主题(Theme)会有cover头图属性,不过这个图需要可以网路上能访问到
网站设置
包括网站名称、描述、作者、链接样式等,全部在网站目录下的 _config.yml 文件中,参考官方文档按需要编辑。
注意:冒号后要加一个空格!
好了,GitHub+Hexo的建站文章写完了,如果想更换主题可以参考我的另一篇文章:地址