hexo+git搭建自己域名博客

目录
  1. 导语:
  2. 一、 官方文档:
  3. 二、 基础环境说明:
    1. 1. 操作系统:win10 64位
    2. 2. 配置环境:node.js + github desktop
  4. 三、 配置hexo基础环境:
    1. 1.下载node.js
    2. 2. 下载github desktop
  5. 四、下载、安装hexo
    1. 1. 通过npm下载hexo
    2. 2. 设置初始化文件夹
  6. 五、修改配置信息
    1. 1. 使用文本编辑器打开_config.yml
    2. 2. 自定义部分信息
    3. 3.deploy可以暂不改
    4. 4. 其他文件可以不必修改
    5. 5. 修改完毕后保存_config.yml文件
  7. 六、hexo的使用
    1. 1. hexo 创建文章
    2. 2. 编辑文章
    3. 3. 生成静态文件
    4. 4. 本地服务器预览
  8. 七、github 注册、同步
    1. 1.github 注册
    2. 2. 新建仓库
    3. 3. 复制hexo里的public文件夹中的所有文件到本地仓库
    4. 4. 提交修改,然后同步
  9. 八、域名注册与绑定
    1. 1. 注册域名
    2. 2. 使用DNSPOD来解析域名
    3. 3.github 仓库里添加CNAME
    4. 4. 进入DNSPOD去绑定域名,设置解析
    5. 5. 其他注意事项:

导语:

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
如果不想费心费力的去写HTML的话,也不愿意花费租用主机且想有自己独特域名的,选用GitHub+hexo是个不错的选择。

一、 官方文档:

hexo官方文档:英文

hexo官方文档:中文

二、 基础环境说明:

1. 操作系统:win10 64位
2. 配置环境node.js + github desktop

官方文档的配置采用的是:node.js +git
git截图
说明一下:在这里我用Github desktop替换了git,因为我是小白入门,不是特别喜欢git那种命令行的操作,更喜欢Gui一些,所以宁愿用直观牺牲掉高效。不过,如果你已经熟悉git的操作了,完全可以使用git;当然也可以选择后续逐步来适应git
官方手册环境配置要求

三、 配置hexo基础环境:

1.下载node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 的包管理器 npm,是全球最大的开源库生态系统。hexo就是其中的一个包。

node.js官网下载地址

可以选择LTS版本

node.js中文站下载地址

因为已经安装过了,就懒得安装截图了。

2. 下载github desktop

github desktop

下载后先安装即可,后文讲如何注册、创建仓库、设置域名等

四、下载、安装hexo

1. 通过npm下载hexo

在命令行可以通过npm命令下载hexo:

$ npm install -g hexo-cli

温馨提示:纯小白请注意,命令行输入时不含$符号
网速可能会有些慢,耗时会有点久,如果你知道梯子怎么用,可以搭起来,稍微会快点。

2. 设置初始化文件夹

可以先建好文件夹,然后在文件夹使用shift+鼠标右键,然后选择打开命名行。我的是win10用的是powershell,效果没啥差别。
shift+右键

  • 在命令行输入:
    $ hexo init <folder>
    注意:<folder是你打算存放的目标文件夹名字
  • 切换至目标文件:
    $ cd <folder>
  • 输入命令:
    $ npm install
  • 文件夹结构
    完成上述步骤后,文件夹大体如下(我的因为使用过,会有细微差别):
    文件夹结构

五、修改配置信息

1. 使用文本编辑器打开_config.yml

文件夹内有个_config.yml,这就是配置文件,可以使用文本编辑器(如:Notepad++:官网下载地址)打开

2. 自定义部分信息

主副标题、作者、描述:可以自定义
语言:可以参照下图设置为中文
时区:可以参照下图设置为亚洲上海
url:改为自己注册的域名

自定义信息

3.deploy可以暂不改

注:因为我们使用GitHub desktop来同步文件到GitHub,所以后续不适用deploy来发布、更新网站,所以暂时可以不用修改,如果你会使用git且愿意使用的,可以参照官方文档步骤设置。
deploy

4. 其他文件可以不必修改
5. 修改完毕后保存_config.yml文件

六、hexo的使用

1. hexo 创建文章

使用如下命令可以创建新文章:
$ hexo new [layout] <title>

可以在命令中指定文章的布局(layout),默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。由于我们并未修改,所以可以直接使用$ hexo new <title创建文章。

注意:<title即文章名,没有尖括号

2. 编辑文章
  • 查找到.md文件
    由于layout我们并未修改,所以默认在hexo目标文件夹的\source\_posts文件夹下,为<title.md>文件,该文件可以使用文本编辑器进行编辑,使用MARKDOWN语法。
  • vscode 下载
    目前我使用的是VSCODE,可以配合插件在编辑同时预览。

vscode官方网站

  • Markdown插件
    安装vscode后可以打开“拓展”,搜索Auto-Open Markdown Preview插件
    markdown插件
    安装插件后打开.md文件进行编辑,点击右上角预览图标开启预览
    vscode markdown预览
3. 生成静态文件
  • 文章编辑完成后,可以通过如下命令来生成静态文件:$ hexo generate 或者$ hexo g

  • 文件生成后,会产生一个public文件夹,这个文件夹里的内容就是需要我们同步到GitHub的内容了。

4. 本地服务器预览
  • 在命令行输入如下命令启动服务器:

$ hexo server
启动本地服务器

  • 在浏览器搜索栏里输入localhost:4000就可以预览到网站了
  • ctrl+c可以退出本地服务器

七、github 注册、同步

1.github 注册

注册github

2. 新建仓库
  • 通过“new repository”新建代码仓库,届时用于存储博客需要展示的页面等文件
    新建仓库
  • 使用”用户名”+”github.io”组合命名仓库,注意每个账户仅能配置一个这样的仓库。
    实例中用户名”yin”,所以用”yin.github.io”
    设置名字

  • 将仓库克隆到本地
    用客户端打开——然后选择仓库本地存储路径——保存
    用desktop clone到本地

选择路径,然后clone

3. 复制hexo里的public文件夹中的所有文件到本地仓库

复制粘贴到本地仓库后,GitHub desktop就可以自动发现变化了
复制文件
粘贴文件
github desktop发现文件

4. 提交修改,然后同步
  • 选择”master”,填写commit说明,然后点击”commit to master”,commit后其实4就会发生变化,然后选择”push origin”,完成同步。这样在网页版看到的就是同步后的内容了。
    commit

push origin

github repository

  • 关于git的用法,还有很多很多,具体可以学习廖雪峰的教程:廖雪峰博客

八、域名注册与绑定

1. 注册域名

国内的域名注册商一般需要做备案,为了偷懒,我直接在“狗爹”godaddy.com上注册的。

  • 挑选喜欢的域名,添加到购物车
    域名示例
  • 隐私保护不需要的话可以选“不,谢谢”
    隐私保护
  • 虚拟主机选“不,谢谢”,因为我们后续将使用GitHub托管内容
    虚拟主机
  • 前去付款
    订单信息
  • 开始付款,填写结算信息,可以选择支付宝和银联
    付款页面
2. 使用DNSPOD来解析域名
  • 域名注册完成后进入“我的产品”,示例是我自己的域名
    域名

  • 自定义域名服务器:
    DNSPOD免费的域名服务器分别如下,添加后点击保存

f1g1ns1.dnspod.net

f1g1ns2.dnspod.net
自定义域名服务器

3.github 仓库里添加CNAME
  • 通过“create new file”添加CNAME
    创建文件
  • 注意CNAME文件名为大写,且没有后缀名
    CNAME
  • 在文件中写入自己的网址,注意没有”http”、”https”和”www”
  • “commit new file”提交文件
    commit CNAME
  • 进入该仓库的”settings”,往下拉设置域名
    settings
    settings
4. 进入DNSPOD去绑定域名,设置解析
  • 注册dnspod账户,不细说
    dnspod.cn

  • 进入控制台——域名解析——添加域名
    添加域名

  • 添加 @ 和 www 两个主机记录,下图第一、四行红色框内的
    主机记录

  • 记录值可以写”用户名”+”github.io”的域名,如”yin.github.io”,也可以先ping到”用户名”+”github.io”的ip后填写进入
    ping

5. 其他注意事项:
  • CNAME文件请同步到本地仓库,将hexo public文件更新到本地仓库时,不要把CNAME删除了。
  • 如果涉及多个设备管理博客,可以另建一个仓库,把hexo里的所有文件同步到GitHub里了。