多设备管理个人博客


对于新电脑,如何管理已经搭建好的个人博客呢?

〇、前言

当我们更换了一台电脑后,想更新博客内容,如果每次都新建一次网站,未免过于繁琐,因此需要一种方法来管理博客。

一、原理

使用hexo搭建的个人博客是静态网页,如果能将网页的静态文件和生产网页的源文件分开管理,那将非常方便。Github本身的分支给我们提供了很好的解决思路。在Github上建立的个人网站的仓库,默认分支是master分支,个人网站的内容也是从这个分支生成的。我们可以新建一个source分支,来存放源文件。这样做有两个好处:

  1. 将网页的静态文件与源文件分开管理;
  2. 在新电脑上克隆源文件的时候,文件夹中的.git是相同的,如果是新建文件夹,那么这个不一样,会导致无法上传。

二、操作方法

2.1 源电脑上的操作方法

直接在github的仓库中,找到Branch:master后的小箭头,输入source新建该分支。为了方便,将该分支在Settings->Branches中,将source分支设置为default,并Update。

使用git clone https://github.com/ColaInLibrary/ColaInLibrary.github.io在电脑的其他位置克隆一个名为ColaInLibrary.github.io的文件夹,并将存放博客源文件全拷贝到该文件夹。

使用git branch命令可以查看当前分支。依次执行git add .git commit -m "自己修改的内容说明"git push origin source,将网站的源文件提交至source分支。

2.2 新电脑上的操作方法

2.2.1 SSH的添加

1.配置本机全局git环境

1
2
3
npm install --save hexo-deployer-git
git config --global user.email "YourEmail"
git config --global user.name "ColaInLibrary"

2.生成SSH密钥

1
2
less ~/.ssh/id_rsa.pub          # 验证是否之前生成过ssh的key,若有,则会出现一串秘钥
ssh-keygen -t rsa -C YourEmail # 若无,则重新生成秘钥

3.Github网页配置
从网页上打开github,没有注册的话需要注册一个账号,注册后正常登录,从头像那里选择settings->SSH and GPG keys,填入刚刚生成的SSH秘钥,名字可以自己填。在Terminal中输入下列命令测试是否成功。

1
ssh -T git@github.com

如果成功,会提示Hi ColaInLibrary! You've successfully authenticated, but GitHub does not provide shell access.

2.2.2 新电脑上博客的配置与发布

  1. cd 欲存放源文件的目录
  2. git clone https://github.com/ColaInLibrary/ColaInLibrary.github.io
  3. 打开ColaInLibrary.github.io文件夹,右键打开Terminal(Windows环境是Git Bash),依次执行npm install hexohexo initnpm installnpm install hexo-deployer-git,将该文件夹配置为hexo相关环境
  4. 安装相应的插件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    npm install hexo-symbols-count-time --save
    npm install hexo-related-popular-posts --save
    npm install hexo-douban --save
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
    npm install hexo-baidu-url-submit --save
    npm install hexo-generator-feed --save
    npm install hexo-generator-searchdb --save
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save
    npm install hexo-blog-encrypt --save
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  5. 编写新的博客内容后,本地调试:hexo clean && hexo douban -bgm && hexo g && hexo s
  6. 将静态网页推送到github:hexo clean && hexo douban -bgm && hexo g && hexo deploy
  7. 如果所有文件均不涉密,依次执行git add .git commit -m "自己修改的内容说明"git push origin source,将网站的源文件提交至source分支。如果有博客内容加密,可以选择不执行这一步操作,即不更新source分支。

注意:在新电脑上第二次及以后更新博客内容时,在第2步时可以执行git pull来更新自己电脑的本地仓库,如果有加密博客而博客源码又未存放至github,注意需要将加密博客从源电脑拷贝到新电脑的博客文件夹中才行。上述操作的第6步会将将静态网页文件推送到master分支,第7步会将源文件推送到source分支。

2.2.3 数学公式mathjax的配置

插件安装

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

安装好后,找到./node_modules/kramed/lib/rules/inline.js,修改
1
2
3
4
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 原第11行
escape: /^\\([`*\[\]()#$+\-.!_>])/
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 原第20行
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

注意:

  1. 在主题的配置文件中将mathjax开关打开
  2. 在博文的开始加上 mathjax: true

2.2.4 node报warning: no module

node 报Warning: Accessing non-existent property xxxx of module exports inside circular dependency

解决方案:
找到 ./node_modules/stylus/lib/nodes/index.js,代码最前面加入

1
2
3
exports.lineno = null;
exports.column = null;
exports.filename = null;

参考链接

1.使用hexo,如果换了电脑怎么更新博客?
2.在Hexo中渲染MathJax数学公式
3.Warning: Accessing non-existent property xxxx of module exports inside circular dependency

------ 本文结束感谢您的阅读------
Donate a cup of cola?