0%

Hexo+Github搭建个人博客记录

搭建博客的基本思路是先在本地创建,再部署到远端。首先本地创建时,使用Node.js + Hexo。然后远端部署时,这里使用GitHub。最后再利用比较流行的主题Next对个人博客进行美化,便于自己使用。

环境准备

Hexo依赖于Node.js,下载地址为Download | Node.js,不过win10默认已经安装了,可以先在命令行输入: node -V和 npm -V,如果已经安装成功,则该步骤可以跳过。node和npm就是安装Hexo的基础环境。

Hexo博客搭建

  1. 在D盘创建blog文件夹,然后在该文件夹下面运行:npm install -g hexo-cli即完成了Hexo的安装;

  2. 在D:\blog下面运行:hexo init blog,完成本地博客的初始化;

  3. 运行以下命令,并在浏览器输入localhost:4000即可看到最简单的博客

    1
    2
    hexo g    # 生成博客
    hexo s # 在服务端显示
  4. 到此为止,本地博客最简单的版本就算搭建完成了,此时会在blog文件下面生成一系列文件,主要文件有以下几个:

    1
    2
    3
    blog/_config.yml            # 站点配置文件,和后面同名的主题配置文件区分
    blog/source/_posts/*.md # 生成博客的Markdown文件
    blog/themes # 主题文件夹,后面会介绍,可以更换并配置主题
  5. 另外,hexo常见的操作如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    npm install hexo -g         #安装Hexo
    npm update hexo -g #升级
    hexo init #初始化博客
    # 上述命令基本上一次性使用
    # 下面四条最常用
    hexo n "我的博客" == hexo new "我的博客" #新建文章
    hexo g == hexo generate #生成
    hexo s == hexo server #启动服务预览
    hexo d == hexo deploy #部署

Hexo+Github线上运行

我们搭建博客的目的肯定不是为了只在本地运行,所以需要通过一定的技术手段将博客上传到远端。具体操作时,可以花钱购买域名,也可以使用免费的版本,这里我使用了常见的GitHub作为远端服务器。
在这里多说一句,GitHub在国内有时候访问速度很不理想,比如我们实验室,平时下载东西的速度能到30Mb/s,但是访问GitHub有时候就很慢,所以推荐大家购买一个靠谱的vpn并且对GitHub的访问进行合理配置,科学上网。我经常使用的vpn是myunlu,整体使用下来还是很稳定的,我的邀请码是 5A9334B8EA51BAC53A2F8561FB156427。最后在命令行配置GitHub代理即可。

1
2
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080

接下来就是正式的操作:

  1. 创建GitHub仓库,仓库名一定是username.github.io

  2. 安装git:win下直接下载客户端就行,其他系统同理,安装完成之后,在git bash中执行以下命令:

    1
    2
    3
    4
    5
    1. git config --global user.name "你的GitHub用户名"
    2. git config --global user.email "你的GitHub注册邮箱"
    3. ssh-keygen -t rsa -C "你的GitHub注册邮箱"
    4. 复制生成的id_rsa.pub中的密匙,然后到GitHub->Setting->new SSH Key中配置
    5. ssh git@github.com # Hi, ***! You've successfully authenticated, but*** 说明成功了

    上面的一通操作只要知道其目的就行,实质就是通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

  3. 安装git和Hexo联合部署工具:这个可以理解成GitHub对hexo的一个插件,这样使用简单的hexo命令,就可以完成GitHub部署了,该插件的安装命令为: npm install hexo-deployer-git --save

  4. 修改站点配置文件blog/_config.yam

    1
    2
    3
    type: git
    repo: https://github.com/[yourusername]/[yourusername].github.io.git
    branch: master
  5. 部署到远端:使用以下命令,即可将本地的博客内容部署到远端。此后,只需要用到下面的几条命令以及Markdown语法

    1
    2
    3
    4
    hexo clean  # 清理
    hexo g # 生成
    hexo s # 本地端口4000预览
    hexo d # 推到远端,所以需要上面GitHub关联,和git+hexo联合部署工具

Next主题配置

上述三部分的功能是核心,保证了我们能够搭建最基础的博客。但是默认生成的博客页面大家可能不喜欢,在这里推荐一个比较常见的主题Next。之所以推荐这个主题,和我当初选择Hexo的原因很类似:选择一个成熟好用的框架,这样有问题之后方便交流,毕竟我们的目的不是深入研究网页开发。

  1. 下载Next主题: 在blog目录下,运行命令
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    即可将next主题下载到blog/themes/next下面,其中最重要的文件为blog/themes/next/_config.yam,我们把这个文件叫 主题配置文件,注意和上面的 站点配置文件 的区别。

  2. Next主题定制
    接下来就是根据个人喜好定制Next主题了,在这里推荐博客1博客2,比较有用的操作主要有以下几个:

    • 修改基本信息
    • 修改头像
    • 修改语言
    • 菜单设置
    • 系统评论
    • 访问量和统计功能
    • 搜索功能

总结

经过以上几个步骤,就可以搭建一个正常使用的博客了,如果对博客的搭建本身很有兴趣,可以继续查阅相关资料。在我看来,够用就好,把更多的经历放在记录上。

参考文献

  1. https://zhuanlan.zhihu.com/p/26625249
  2. https://blog.mrzorg.top/Hexo/2020-02-12-hero-next-theme-settings/
  3. http://jeffyang.top/Hexo/Hexo%E4%B8%BB%E9%A2%98Next%E7%BE%8E%E5%8C%96/