hexo + github +语雀 搭建一个属于自己的博客- 2020-10-11 13:00- hexo: 博客,hexo,语雀

一直以来都想维护一个自己的小博客，抒发情感也好，记录生活也好，整理学习笔记也好，遂开始了解各种博客：自己开发维护一整套网站或是使用现在已有的博客网站，例如CSDN。原来是想独立开发一个完整的博客，后来发现维护成本太高，遂寻找替代方案。我是那种又想自己维护一个博客的生命周期，又不想太过操心的人，自己开发维护一套网站成本都太大了，CSDN又满足不了我想对博客做自定义，最后了解到hexo，既不需要花太多精力去开发，又满足了我的自定义，所以我的博客是依赖hexo+github+语雀搭建成功的。

我的博客地址：https://yanisyoung.com/，有兴趣的可以先瞅瞅。

一：拥有github仓库

注册github账号

首先我们要拥有一个github账号，下面是我为大家提前准备好的步骤，适合小白，想看具体操作步骤的可以直接戳这个链接：https://jingyan.baidu.com/article/4e5b3e192200e291911e2468.html

  1. 1.进入github官网，点击右上角注册按钮。官网链接：https://github.com/
  2. 2.填写账号名，邮箱和密码
  3. 3.选择免费的公开仓库，点击完成就提示注册成功了。
  4. 4.点击右上角的账号设置，可以填写一些基本信息。 这部分属于github的社交功能了
  5. 5.我们看到页面上有一个警告标记，是邮箱验证。 打开邮箱找到邮件点击即可。 
  6. 6.好了，准备开始玩玩git。

**

创建仓库

我们现在已经有github账号了，还需要拥有一个可以存放博客的仓库，所以这里我们需要配置一下github pages。什么？ ！你还不会用github！去官网学一波再回来：https://pages.github.com/。什么？！官方操作看不懂？那百度会吧? 贴心的我已经为你们准备好了步骤，请结合官方教程食用 ：

  1. 1.登录github,点击右上角头像，选择 Your projects，进入仓库页面
  2. 2.点击页面上的 New 按钮，进入新建仓库页面，这里可结合官方教程一起看
  3. 3.在Repository name中输入你的想叫的博客名，以github.io为后缀，例如我的是 my-blog.github.io
  4.     如果你希望你的站点能通过 <你的 GitHub 用户名>.github.io 域名访问，你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io
  5. 4.接下来选择仓库私有还是公共，私有：private  公共:public，这里我们先选择public
  6. 5.其他选项 大家可以自由添加，这里我们先不填
  7. 6.点击create repository，我们的公共仓库也就创建好了
  8. 7.按照以上步骤，大家再创建一个私有仓库，私有仓库命名只要标识清楚即可

注意：我们需要准备两个仓库，一个私有，一个公开，私有的仓库用来存放博客源码，公共的仓库用来存放博客的静态资源，用于给大家展示我们的博客。
**

clone仓库到本地

安装git

  1. 1.要访问我们的仓库就需要依靠git，安装git可以参考下hexo官方文档中提到的下载方式(https://hexo.io/zh-cn/docs)，这里我们可以直接从官网下载，根据自己电脑系统来选择对应的git版本：https://git-scm.com/downloads，两种方式都可以，直接从官网下载可能会很慢
  2. 2.这里以Windows10为例，git下载完毕后，运行git.exe文件 选择安装路径，一路安装默认选择 安装就可以了。
  3. 3.git安装好后，需要在电脑中配置环境变量，这里还是以Windows10为例，mac或其他操作系统大家可以自行百度:
  4.   1>在桌面上右键单击计算机图标。
  5.   2>从上下文菜单中选择属性。
  6.   3>单击高级系统设置链接。
  7.   4>单击环境变量。在系统变量部分中，找到并选择 PATH 环境变量。单击编辑。如果 PATH 环境变量不存在，请单击新建。
  8.   5>在编辑系统变量（或新建系统变量）窗口中，指定 PATH 环境变量的值，这里我们制定的环境变量的值就是你安装的git目录，需要指定到bin文件夹，以我的举例：        
  9.           D:\develop\Git\bin。单击确定。通过单击确定关闭所有剩余窗口。
  10.   6>打开命令提示符窗口，输入 git --version 回车,如果窗口输出了git 版本，则表示安装成功

**

clone**

git安装成功后，我们需要将仓库的代码clone到本地，以我为例，我clone到本地的路径：D:\project\myblog\xy-blog.github.io

  1. 1.登录github,进入你上一步创建的公共仓库页面，例如我的仓库页面：https://github.com/yanisoung/xy-blog.github.io，在这个页面上找到code按钮，这里选择HTTPS方式clone,复制一下https链接，例如我的链接是：https://github.com/yanisoung/xy-blog.github.io
  2. 2.在d盘新建一个文件夹命名为mylog（此处以我的为例），进入新建的空文件夹内
  3. 3.在文件夹内右键，选择 Git Bash here
  4. 4.在打开窗口内，输入以下命令回车
  5. git clone 你刚才复制的https链接
  6. 例如我的就是：
  7. git clone https://github.com/yanisoung/xy-blog.github.io.git
  8. 5.在clone的过程中会让你输入github的用户名和密码，遇到这种情况直接填写即可

二：本地安装hexo

好了，现在我们已经将仓库的代码clone到本地了，是不是顿时觉得有那么点意思了，别急，让我们来了解一下hexo，奉上hexo官网：https://hexo.io/zh-cn/docs/index.html。
给大家提个醒，一定要先从官网了解起，官网上对于hexo的玩法和介绍已经很丰富了，网上那些教你如何玩hexo的，大部分都是从官网copy过去的，官方文档实在看不懂的，再去百度。不要问我为什么知道，都是血泪史啊。一定要看官网！一定要看官网！一定要看官网！重要的事情说三遍！**

安装node

安装hexo之前，我们需要安装一下node.js(Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)，大家可以自行去官网下载：https://nodejs.org/en/download，或者参考hexo官方文档提供的下载方式。
安装的时候选择一下路径，其他直接点下一步就可以了。
安装完成后，打开命令提示符，也就是cmd窗口，输入 node -v ，来验证是否安装成功，如果可以看到node的安装版本既表示安装成功。

安装hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo，安装hexo有两种安装方式，一种是全局安装方式 既安装一次即可随意使用，一种是局部安装，只安装在指定目录，其他地方如需要使用hexo，还需要重新安装，这里选择全局安装。

  1. 安装方式：打开命令提示符窗口，执行下面的命令，全局和局部安装，选择其一即可
  2. # 全局安装
  3. $ npm install -g hexo-cli
  5. # 局部安装
  6. $ npm install hexo
  8. 需要说明一点的是，如果选择局部安装，需要将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

hexo安装完成后，我们可以打开命令提示符窗口，输入 hexo -version 来查看hexo的版本，是否安装成功。

建站

接下来我们需要在本地进行建站，还记得创建github公共仓库之后，clone到本地的目录吗？以我的为例，我的是D:\project\myblog\xy-blog.github.io。
1.打开命令提示符窗口，进入D:\project\myblog\xy-blog.github.io目录，执行以下命令，将我的文件夹路径替换成你本地的路径
cd D:
cd D:\project\myblog\xy-blog.github.io
2.在本地仓库目录下执行以下命令

  1.  hexo init

命令执行成功后，可以看到以下目录结构：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

3.接下来执行下面的命令

  1. npm install

4.执行完上面的命令后，本地博客就建成了，执行下面的命令，访问这个链接 http://localhost:4000/ 就可以看到你的博客长什么样了

  1. hexo clean && hexo g && hexo server

三：hexo+gitbub 部署博客

到目前为止我们，这边都还是在本地查看和部署博客，怎么才能分享给网络的人呢？
1.安装 hexo-deployer-git。

  1. $ npm install hexo-deployer-git --save

2.修改_conift.yml
打开根目录下的_conift.yml文件，不是主题里的_conift.yml，添加下面一段配置，如果已经存在配置，则需要修改为你自己的git仓库

  1. deploy:
  2.   type: git
  3.   repo: 修改为你的仓库地址
  4.   branch: master #published 分支
  5.   message: "{{ now('YYYY-MM-DD HH:mm:ss') }}"

3.推送博客至仓库

  1. hexo clean && hexo g && hexo deploy

4.设置仓库显示分支
登入 Github，在库设置（Repository Settings）中将默认分支设置为_config.yml配置中的分支名称。

5.访问线上博客
在浏览器里访问 <你的 GitHub 用户名>.github.io，即可看到你的博客，可以将这个链接分享给朋友，让朋友也访问你的博客。
例如我的仓库名是my-blog.github.io ，直接在浏览器里访问 my-blog.github.io 即可。

四：语雀文档同步到hexo

我们这里使用yuque-hexo插件将语雀文档同步到hexo，官网：https://github.com/x-cold/yuque-hexo，还是那句话，先看官网，按照官网流程走，实在不懂再回来！！！！
1.创建文档库 && 获取语雀token

  • 首先注册语雀账号，语雀官网：https://www.yuque.com/
  • 登录语雀账号，新建一个文档库
  • 在语雀上点击 个人头像 -> 设置 -> Token 即可获取


2.配置yuque-hexo**

  • 在根目录下的package.json中添加以下配置

    • adapter 使用hexo和markdown都可以，我这里推荐使用markdown，经过我自己测试markdown对front-matter支持的更好
    • login和repo可以点击 个人头像 -> 设置 -> Token 即可获取
    • login和repo可以从 你的仓库路径中获取，例如我的 仓库路径 ：https://www.yuque.com/jinjidexiaobai/myblog ,其中jinjidexiaobai就是我的login，myblog就是我的repo ```bash {
      “yuqueConfig”: { “baseUrl”: “https://www.yuque.com/api/v2“, “login”: “替换成你的语雀login”, #jinjidexiaobai “repo”: “替换成你的语雀仓库短名”, #myblog “mdNameFormat”: “title”, “postPath”: “source/_posts/yuque”, “cachePath”: “yuque.json”, “adapter”: “markdown”, “token”: “语雀toke”, “onlyPublished”: true, “onlyPublic”: true }, “scripts”: { “clean”: “hexo clean”, “clean:yuque”: “yuque-hexo clean”, “deploy”: “yuque-hexo sync && hexo deploy”, “publish”: “npm run clean && npm run deploy”, “dev”: “hexo s”, “sync”: “yuque-hexo sync”, “reset”: “npm run clean:yuque && npm run sync” },

    “devDependencies”: { “yuque-hexo”: “^1.6.5” } } ``` | 参数名 | 含义 | 默认值 | | —- | —- | —- | | postPath | 文档同步后生成的路径 | source/_posts/yuque | | cachePath | 文档下载缓存文件 | yuque.json | | mdNameFormat | 文件名命名方式 (title / slug) | title | | adapter | 文档生成格式 (hexo/markdown) | hexo | | concurrency | 下载文章并发数 | 5 | | baseUrl | 语雀 API 地址 | - | | login | 语雀 login (group), 也称为个人路径 | - | | repo | 语雀仓库短名称，也称为语雀知识库路径 | - | | onlyPublished | 只展示已经发布的文章 | false | | onlyPublic | 只展示公开文章 | false |

  • 首次发布时 需要在你本地仓库内执行以下命令安装yuque-hexo 

    1. npm i -g yuque-hexo
    2. # or
    3. npm i --save-dev yuque-hexo

    3.常用命令 

    1. # 同步语雀的文档到本地
    2. yuque-hexo sync
    3. #  清理语雀文档
    4. yuque-hexo clean

    常用命令

    使用hexo需要我们熟悉一下常用的命令，之后就会用得到。 ```bash

    生成文章 会在source文件夹下生成 文章名.md

    hexo new “文章名”

    清理生成的静态文件 也就是清理掉public文件夹以其下所有内容

    hexo clea

    重新编译生成静态文件 也就是生成public文件夹

    hexo g

    本地服务启动 主要用于本地调试博客

    hexo server

    上传博客到github，也就是将public文件夹下的所有内容上传到github

    hexo d

这些命令可以连起来一起用 ```

寻找自己喜欢的博客主题

如果不喜欢默认的博客主题，可以去官网主题下面看看，各种主题任君挑选：https://hexo.io/themes
1.首先找到喜欢的主题，点进去看demo，在博客中找到作者的github，一般在github中都会有作者提供的主题仓库，下载zip包。

  • 这里以blur主题为例，主题demo：https://kiten46087.github.io/，在demo中找到github相关标识的东西，点击进入github。
  • 在作者的仓库列表中找到hexo-theme-blur，点击进入仓库详情页
  • 下载主题的zip包到本地

2.只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题

**