ubuntu16.04 Hexo+github+Typora搭建博客


这篇文章是Hexo博客搭建有关的内容。

预备知识

Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在github、gitcafe和Heroku上。博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,hexo所做的就是将这些md文件都放在本地,更新博文目录和相关链接信息,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到github。

Hexo依赖Node.js和Git。nvm(node version manager)是nodejs版本管理工具,管理nodejs和npm的版本;npm是随同nodeJs一起安装的包管理工具,npm管理对应nodeJs的第三方插件;nvm管理构建nodejs和对应的npm,npm管理对应的nodejs的第三方插件。

本地搭建

安装Git

1
sudo apt-get install git-core

安装Node.js

最好的方式是使用NVM(Node Version Manager)安装,在终端安装nvm执行命令:

cURL:

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

Wget:

1
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

重启终端安装Node.js:

1
nvm install stable

安装Hexo

1
npm install -g hexo-cli

初始化Hexo

1
2
3
4
5
mkdir git
cd git
hexo init hexo #自定义的文件夹
cd hexo
npm install

设置Hexo

执行命令:

1
2
hexo g/generate  #生成静态网页
hexo s/server #运行本地服务器

如果出现提示:

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

说明安装成功,在浏览器地址栏输入http://localhost:4000 就可以看到默认主题的博客界面了。

博客主题更改

安装主题next或yillia,在~/git/hexo/目录下执行命令:

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

1
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

更新主题,修改hexo目录下的_config.yml,将theme属性设置为nextyilia,默认是landscape。

执行命令查看本地效果:

1
2
hexo g
hexo s

到此为止已经完成了Hexo博客的本地安装和查看,下一步是将博客部署到github上面,这样就可以通过网络远程访问自己的博客了。

目前使用的是next主题,完整的安装配置过程可以参考这里

next主题优化推荐文章:https://www.jianshu.com/p/1f8107a8778c

部署到github

  • 首先到github上面注册自己的账号。
  • 配置github

命令行输入命令:

1
2
git config --global user.name "username" #ruoxiangli
git config --global user.eamil "email@example.com" #981968690@qq.com

其中yourname是输入你自己的用户名,email@example.com输入你自己的注册邮箱。

这里可以使用git config --list命令查看配置好的内容(保存在home/.gitconfig文件中),如果需要修改用户名或邮箱,执行如下命令(也可以直接修改文件):

1
2
git config --global --replace-all user.name “username”
git config --global --replace-all user.email “email@example.com”
  • 创建公钥,命令行输入命令:
1
ssh-keygen -C 'you email address@gmail.com' -t rsa

说明:C必须大写,改为自己的注册邮箱,然后一直回车,直到出现“The key’s randomart image is:”的提示。

之后用户目录~/.ssh/下建立了相应的密钥文件id_rsa.pub,打开该文件。

  • 添加公钥:github首页右上角点击头像,选择Settings,再选择New SSH KEY,把上一步id_rsa.pub文件的秘钥复制进去生成公钥。
  • 创建项目仓库:github首页点击右上角的+,选择New repository。在页面里输入username.github.io,必须这么写。填完后点击Create repository
  • 部署博客:修改hexo目录下的_config.yml文件,最后面修改为:
1
2
3
4
deploy:
type: git
repository: git@github.com:username/username.github.io.git
branch: master

安装hexo的插件:

1
npm install hexo-deployer-git --save

然后:

1
2
3
hexo clean
hexo generate
hexo deploy #可以使用hexo g -d命令代替上面两个命令

在浏览器输入yourname.github.io就可以访问的自己的博客啦。

绑定自己的域名

绑定域名分2种情况:带www和不带www的。

域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先ping一下yourname.github.io的IP,然后到域名DNS设置页,将A记录指向ping出来的IP,将CNAME指向username.github.io,这样可以保证无论是否添加www都可以访问,如下:

img

然后到github项目根目录新建一个名为CNAME的文件(无后缀),里面填写自己的域名。在绑定了新域名之后,原来的username.github.io并没有失效,还是会自动跳转到新域名。

编辑.md文件工具推荐

笔者使用的是Typora,官网,网页最下面是下载入口,根据自己的系统选择,ubuntu的方式如下:

1
2
3
4
5
6
7
# optional, but recommended
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AFCFAE
# add Typora's repository
sudo add-apt-repository 'deb http://typora.io linux/'
sudo apt-get update
# install typora
sudo apt-get install typora

Typora的Markdown语法的学习可以参考博客

配置Hexo渲染MathJax数学公式,推荐文章:https://www.jianshu.com/p/7ab21c7f0674

多机更新

方案一(不好用)

使用坚果云同步hexo文件夹文件。坚果云同步hexo中文件时,有些文件会一直处于分析状态,上传不上去,影响其他文件的上传,so放弃坚果云。

方案二

使用GitHub进行同步

旧设备操作

假设已经按照前面的步骤在旧设备上搭建好了Hexo并部署到了GitHub。

在旧设备部署博客到Github以后,我们可以在Github仓库的master分支上看到上传的博客文件。但是这个博客文件不包含hexo配置文件,所以需要新建分支,使用git指令将带hexo的配置文件上传到新建的分支上。在本地博客根目录下使用git指令上传项目到GitHub,按如下进行操作:

1
2
3
4
5
6
7
8
9
10
11
12
// git初始化 
git init
// 添加仓库地址
git remote add origin https://github.com/用户名/仓库名.git
// 新建分支hexo并切换到新建的分支
git checkout -b hexo
// 添加所有本地文件到git
git add .
// git提交
git commit -m "..."
// 文件推送到hexo分支
git push origin hexo

至此,旧设备上需要进行的操作完成。

新设备操作

  1. Github上新建的分支的文件git clone到本地

    1
    git clone -b hexo https://github.com/用户名/仓库名.git
  2. 安装Git、Node.js

  3. 安装依赖库

    1
    2
    3
    4
    5
    6
    7
    #hexo-renderer-kramed markdown渲染引擎
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
    #rss
    npm install --save hexo-generator-feed
    #hexo-word count
    npm install hexo-wordcount --save

    安装过程中会提示没有/home/eric/package.json文件的提示(但应该已经安装完成了),不过对后面的过程没有影响。

  4. 安装hexo(到git clone的目录下操作命令)

    1
    2
    3
    npm install -g hexo-cli
    npm install
    npm install hexo-deployer-git

    这个过程应该会在当前目录下产生package.json文件,执行hexo clean,应该可以顺利执行,说明配置成功。

  5. 添加SSH key

    • 命令行输入ssh-keygen -t rsa -C “邮箱地址”

    • 按三次回车(密码为空),生成密匙。 在home/username/.ssh目录下找到id_rsa.pub,打开复制内容到GitHub添加新的SSH key。

    • 终端输入ssh - T git@github.com回车,提示认证成功即可。

    • 在终端输入命令(和旧设备中的相同):

      1
      2
      git config --global user.name "username" #ruoxiangli
      git config --global user.eamil "email@example.com" #981968690@qq.com

      执行hexo g -d,顺利执行则说明配置成功。

  6. 配置Hexo渲染MathJax数学公式

新旧设备的日常维护

注意:在当前设备上进行所有操作之前,一定要现将本地的配置文件(包括添加的新博文、修改内容样式等等)进行更新,因为在此之前另一台设备可能向GitHub推送了更新,但是本地的内容还是旧版,若不更新进行操作,之后提交的会是旧版的内容修改后的效果。

为了保证本地内容为最新,所有操作前的操作:git pull origin hexo

本地对博客进行修改(添加新博文、修改样式等等)后,通过下面的流程进行管理:

  1. 配置文件的更新:依次执行git add .git commit -m “…”git push origin hexo指令将改动推送到GitHub(此时当前分支应为hexo)

    补充:如果不想每次push都输入用户名和密码。查看到传输协议,终端执行:

    1
    git remote -v

    可以看到:

    1
    2
    origin	https://github.com/ruoxiangli/ruoxiangli.github.io.git (fetch)
    origin https://github.com/ruoxiangli/ruoxiangli.github.io.git (push)

    重新设置成ssh的方式:

    1
    2
    3
    git remote rm origin
    git remote add origin git@github.com:username/repository.git
    git push -u origin master

    再查看当前传输协议:

    1
    2
    origin	git@github.com:ruoxiangli/ruoxiangli.github.io.git (fetch)
    origin git@github.com:ruoxiangli/ruoxiangli.github.io.git (push)

    到此操作成功。

  2. 静态网页的更新:执行hexo g -d发布网站到master分支

参考文章:https://www.jianshu.com/p/6fb0b287f950

https://blog.csdn.net/crazy_scott/article/details/79342303

遇到的错误解决方法

发现执行时nvm install stable时出现未找到‘nvm’命令的错误提示,解决方式,分别执行下面两行指令:

1
2
export NVM_DIR="$HOME/.nvm"
[ -s "NVM_DIR/nvm.sh" ] && \. "NVM_DIR/nvm.sh" # This loads nvm

执行hexo server后访问http://localhost:4000,出现Cannot Get /提示,打不开网页,可能是由于端口号4000被占用,可以使用其他端口号打开。解决方式:hexo server -p 5000

本文标题:ubuntu16.04 Hexo+github+Typora搭建博客

文章作者:阿翔

发布时间:2018年03月21日 - 22:03

最后更新:2019年05月28日 - 21:05

原始链接:http://ttshun.com/2018/03/21/ubuntu16.04 Hexo+github+Typora搭建博客/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

点击给我一些鼓励叭!
-------------本文结束感谢您的阅读-------------
0%