基于Gitee/Github搭建个人博客

基于Gitee/Github搭建个人博客

如果单纯写博客文章，CSDN、简书或者知乎都是很好的选择，简单易用，直接写就行。但是自己动手建立个人博客网站，不仅有趣，能学到知识，还具备非常强的可定制性。所以，就让我们好好折腾一下~

预计方案

总感觉买个服务器用来搭博客太过浪费，而且静态博客框架可以直接借助于Github Pages搭建博客，相比于动态博客框架WordPress(PHP) + 个人服务器的方案，省钱省力。最后由于网络原因，采用了国内的Gitee Pages，效果是一样的。

静态博客框架主要有以下三种可选：

• Hexo (Nodejs)
• Hugo (Go)
• Jekyll (Ruby)

由于语言的原因，Hugo最快，Hexo其次。Github Pages默认采用Jekyll，但是Ruby对于我来说过于小众，不利于后期魔改，故放弃。综合来看，Hexo与前端联系密切，方便学习，相比Hugo更为成熟，故最终采用Github/Gitee + Hexo的方案。

初步尝试

首先尝试的是Github Pages，按照官方lab可以一步步搭建一个最简单的个人博客，这一套下来最方便的就是可以直接线上定制界面，上传文章等，免去命令行操作，如果不愿意折腾其实直接用官方默认框架Jekyll也挺好，集成度高。然后就要开始捣鼓Hexo了，其实上手也不难，也是直接按照官方教程安装和建站。我选择在Linux虚拟机（Ubuntu 20.04）上进行操作，后来发现并不一定要在Linux上搭建，只要安装好Git和Nodejs，Windows上也是差不多的操作。

Hexo建站

预备环境：

• Nodejs：强烈推荐nvs，可以方便管理和切换不同nodejs版本，由于nodejs版本与很多配套软件兼容性极差，要么低了，要么高了，如果有了版本管理器，很容易就可以切换到对应的兼容nodejs版本，方便后续开发扩展。
• Git：一行命令解决（Debian/Ubuntu）sudo apt install git，其他方式参考官方网站。

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

Hexo安装完成后，执行下列命令，Hexo将会在指定文件夹<folder>中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

重要配置

_config.yml

在_config.yml中，基本配置就是网站的基本信息，包括网站(Site)，网址(Url)，或者一般都需要自定义的扩展(Extension)，主题就是在扩展下面设置的，这里我采用的是yilia-plus，在yilia的基础上改进而来，增加了统计、看板娘和多种评论区，主题需要下载，可以先不设置，后面会讲。需要注意url一定要设置正确，如果网站网站存放在子目录中，例如http://example.com/blog，则需将url设为http://example.com/blog并把root设为/blog/。

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: 游目鱼
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://yu2014ol.gitee.io/blog/
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia-plus

部署配置也是需要在_config.yml中配置的，一般选用Git部署就行。一个正确的部署配置中至少要有 type 参数，例如：

deploy:
  type: git

可同时使用多个 deployer，Hexo 会依照顺序执行每个 deployer：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
  repo: https://gitee.com/yu2014ol/blog.git
    #repo: https://github.com/yu2014ol/yu2014ol.github.io.git
    #repo: https://gitee.com/yu2014ol/yu2014ol.github.io.git
  branch: main
- type: git
  repo: https://github.com/yu2014ol/yu2014ol.github.io.git
  branch: main

配置好就可以执行命令，一键生成站点文件并推送至远程库：

hexo clean && hexo deploy

然后会提示你输入密码，如下图：

这里Github很可能由于网络不畅导致卡住，不提示输入用户名，我就是折腾了好久，无奈之下换了Gitee，瞬间打通了…

注意: 当执行hexo deploy时，Hexo会将 public目录中的文件和目录推送至_config.yml 中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容。

Gitee配置

Gitee中先建立一个仓库，名字可以建立一个与自己个性地址同名的仓库，如https://gitee.com/ipvb这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么就可以创建一个名字为ipvb的仓库https://gitee.com/ipvb/ipvb。部署完成后，就可以以https://ipvb.gitee.io进行访问了。我这里创建名称是blog，所以Pages链接为 https://yu2014ol.gitee.io/blog

Gitee Pages要求先进行实名认证，人工审核一个工作日左右，审核完成后部署步骤非常简单，选择好部署分支，一键直达。

页面效果

主题配置

如果没改主题默认页面与我的不一样，但是至少你能看到Hello World了，距离个人博客就差最后一步了——个性化定制。之前我看有两个博主都用过yilia主题，感觉还不错，于是就使用了该主题。

使用主题也很简单，在官方主题网站或者Github上搜索和查看自己喜欢的主题，最终都到对应的Github项目主页按照说明操作就好了。

主题的配置文件也是_config.yml，但这是在主题目录下的，与Hexo配置文件不是同一个。

网站图片

图片可以放在本地文件夹(themes/yilia-plus/source/img/)，部署时会统一上传。不过图片一多，建议还是采用图床，我用的是路过图床，注意不要上传二维码，会被删。写这篇文章的时候，文内所有图片采用路过图床。使用也很简单，无需注册，直接上传，会给出图片链接，还有Markdown代码可选，如果你也用Markdown写作，粘到文档就可以了。

yilia的小问题

问题1 “所有文章”功能缺失

yilia主题左侧栏目中有一个所有文章的分栏，刚刚安装时点击所有文章栏目会报错缺失模块，此时按照指示进行操作就好。首先在hexo根目录执行：

npm i hexo-generator-json-content --save

然后在根目录_config.yml配置下添加如下代码，注意缩进：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true 

最后重新部署即可：

hexo clean && hexo d

问题2 微信分享二维码无法加载

首先要说明的是，yilia-plus作者直接把微信分享代码注释掉了，应该是没有解决，后续我会提交PR，或许你们再用到的时候就不存在这个问题了。解决办法就是替换成有效的分享链接即可。
需要修改的文件为themes/yilia-plus/layout/_partial/post/share.ejs：

// 去掉两边的注释符 
<a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
  <i class="icon icon-weixin"></i>
</a>
// ... 
<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
    // 先去掉注释，再用我现在这个链接，原有百度网盘不再支持二维码分享了
     <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl  %>" alt="微信分享二维码">
    </div>
</div>

正常效果如下：

总结

• 国内网络不好，建议使用Gitee Pages
• 博客框架就在Hexo和Hugo里面选吧
• 学会用图床，直接在Markdown里面粘贴链接就可以了
• 选一个心仪的主题，好好折腾去吧~