不会飞的小白

Stay Hungry, Stay Foolish

0%

利用Github从零开始搭建Hexo博客，可迁移

发表于 更新于 分类于

准备

  1. 安装Node.js，安装完成之后可以正常使用npm命令
  2. 安装hexo，npm install -g hexo-cli

创建步奏

  1. 创建git仓库，这里需要注意一下，GitPage会默认给分配二级域名，但是当仓库名与账号组织名称一样的情况下会省略掉二级域名，所以这里创建的名称为{yourname}.github.io，一定是以github.io结尾的。当然也可以创建其他的。只是在之后的配置上略有不同。

  2. 创建仓库时使用readme进行初始化。

  3. 同时新建一个hexo分支，并设置为默认分支。

  4. 使用hexo init {name}来初始化，或者新建一个{name}文件夹，在该文件夹下，执行hexo init命令是一样的效果。

  5. 依次执行

    hexo clean：clean
    hexo g：generate，编译生成HTML代码，放在根目录下的public下。
    hexo s：serve，提供serve命令把博客在本地运行起来，然后点击给出的链接就可以正常的使用了，如果链接打不开，可能是端口被占用，可以使用hexo s -p 端口号来指定端口号。

  6. 我这里是用了一个比较主流的主题next，以此为例，大家喜欢什么主题自己配置就好。

    1
    2
    git clone https://github.com/theme-next/hexo-theme-next themes/next

    依次执行命令进行配置就好了。随后在根目录下的_config.yml文件里配置： next。

  7. 删除主题下的git。这里有一点要注意的，在remote远程仓库之前，要把themes文件夹拉下来的主题，删除对应的.git文件删除掉。因为外部已经有了git，内部文件夹也有git时会出现问题。

  8. 配置根目录下的_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: 不会飞的小白
    subtitle: 'Stay Hungry, Stay Foolish'
    description: ''
    keywords: iOS, Swift, GitHub
    author: 不会飞的小白
    language: zh-CN
    timezone: ''

    Site里头的东西，根据自身想法看着写就行。有一个需要注意的是language，它的值是根据对应的Theme中的语言相对应的。

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://liujiaboy.github.io/
    root: /

    这里也需要注意。如果添加了搜索功能或者没有按照{name}.github.io这种命名方式创建的，这里的是必须要填写的。URL：为Github Page生成后对应的地址。root：为哪一级为根目录。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    #主题

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/liujiaboy/liujiaboy.github.io.git
      branch: master

    这里是对应的仓库地址，type一定是 git类型，分支可以选择，我这里是master。

  9. 上面的配置完成之后，再执行步奏5，本地预览没问题后，可以直接走发布。而发布也就是将生成的public文件中的内容push到deploy对应的仓库的分支中。

    hexo d:deploy: 发布。
    如果出现问题，执行npm install hexo-deployer-git安装git插件。

  10. 这个时候，可以在根目录下，remote远程仓库了。

    git remote add origin <远程版本库URL>。这个时候本地默认就是之前创建的hexo分支。

    执行git add ., git commit -m"xxx"之后，在push之前，先把远程分支上的内容pull下来。这个时候执行

    git pull origin hexo

    如果出现问题，是因为本地有提交内容无法完成merge操作。将上面的执行命令改为

    git pull origin hexo --allow-unrelated-histories

    完成merge操作之后，执行git push origin hexo就可以了。

这个时候就已经完成了整体的库都放在Github上了。默认分支hexo存放所有的数据，master分支存放Github Page需要的数据。这就可以开心的玩耍了，也不用担心换设备迁移带来的问题了。

hexo迁移

  1. 确保当前设备已经有Node.js, hexo环境。

  2. 从远程仓库clone到指定文件夹。

  3. 在该文件夹下，执行

    1
    npm install hexo --save

    这一步是必须执行的，创建hexo环境，如果在本电脑的环境下已经执行过下面两个命令，就不用重复执行了。

    1
    2
    npm install
    npm install hexo-deployer-git

    这个时候就没必要执行hexo init了，因为当文件夹下有内容的时候跟本执行不了，会报错。

  4. 如果是多设备同时开发的话，那就需要用到 git pull origin hexo来拉取最新数据了，但是一般情况下不会出现，毕竟自己的博客不会涉及到多人协作。

  5. 就可以开心的玩耍了。

相关配置

NexT主题添加theme-next-canvas-nest几何动效

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

完成上诉操作之后，再next配置文件_config.yml中配置开启canvas_nest，如果没有相关配置，直接复制代码粘贴进去就行。

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

订阅 rss

博客一般都需要rss订阅，如果要开启，需要安装一个插件。安装完成会自动生成相关配置。

1
npm install hexo-generator-feed --save

生成的rss对应的文件public/atom.xml

创建文章

1
hexo new <文章名>

新建一篇文章，使用markdown的格式。在一篇文章的开头，会有如下必要信息

1
2
3
4
5
6
7
8
9
10
---
title: 利用Github从零开始搭建Hexo博客，可迁移
date: 2020-03-06 22:07:06
tags:
    - Github
    - hexo

categories:
    - 杂记
---

其中title， date是必填的，tags就是标签，可选， categories：分类，也是可选。在next主题下，默认会生成目录。

创建标签页 tags

1
hexo new page tags

也会生成类似文章的md文件，可以在头部自行添加。

1
2
3
4
title: tags
date: 2020-03-06 22:07:06
type: tags
comments: false

type: 指定为tags
comments：是否允许评论

分类页 categories

1
hexo new page categories

指定type：categories

hexo默认会创建archives类型的文件，不会默认创建tags和categories，但是创建完成这两个之后，只需要指定type类型即可，不用在文件中添加其他数据。

搜索页

很多情况下需要搜索全站内容，所以有必要支持搜索。需要安装插件支持

1
npm install hexo-generator-searchdb --save

很多主题对应的搜索都不一样，但是搜索的插件都是必须的。这里需要修改上面提到的URL并指定root文件路径。

404页面

当页面出错的时候，就很有必要的添加一个404的错误页面。直接在根目录下创建一个404.md文件即可。也有会接入腾讯公益404广告的，自行google吧。

这个只针对绑定域名的有效，GitHub默认分配的是没有效果的。

1
2
3
4
5
6
7
---
title: 404 Not Found
date: 2020-03-06 11:06:55
---
<center>
    对不起，您访问的页面不存在或已被删除
</center>

创建about

1
hexo new page about

使用图片

  1. 绝对路径引用
    当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。

    1
    2
    3
    source/images/image.jpg
    // 这样就可以了
    ![](/images/image.jpg)

  2. 相对路径引用
    图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。

    1
    post_asset_folder: true

    修改之后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md的同时，会生成文章同名的文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

    1
    ![](image.jpg)

    这个时候，可能还是不管用。那就需要下载插件了。

    1. 在当前博客根目录下，执行npm install hexo-asset-image --save。
    2. 找到node_modules --> hexo-asset-image --> index.js文件，找到58行代码：$(this).attr('src', config.root + link + src);
    3. 修改为：$(this).attr('src', src);

遇到的问题

1. 默认buffer太小，push、pull失败

1
fatal: unable to access 'https://github.com/liujiaboy/liujiaboy.github.io.git/': LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 60

解决方案：

1
git config --global http.postBuffer 1048576000

这中问题的原因是，大文件造成的，curl的postBuffer默认值太小，增大缓存配置就好了。

Error: Spawn failed

  1. 删除.deploy_git文件夹;
  2. 输入git config –global core.autocrlf false
  3. 然后，依次执行：
    1. hexo clean
    2. hexo g
    3. hexo d

总结

感谢大佬们做的总结，不一一列举了。感谢
next: Github