云服务器搭建Hexo博客!

Posted on |
云服务器搭建Hexo博客

云服务器搭建Hexo博客

这里介绍一下云服务器搭建Hexo博客,并且利用Nginx做代理,并且利用Coding.net或者Github同步页面,最后发布。

效果参考:我的博客

我还有一个博客架设在github pages上面,为什么我不喜欢用github pages创建呢,因为中国伟大的墙,导致github不稳定,这会使得没梯子时经常抽风,虽然理论上是称github是没被墙的,但是访问经常缓慢,什么的很不方便(做开发、搞研究还是得自备梯子)。另外没事练练动手能力吧。

搭建Hexo本地环境

先在本地搭建好hexo环境。

这个我不多说,网上教程一大堆。最好是看到那种搭建并且有创建Github Pages的博客教程。

需要注意的是Hexo自带的Markdown解析器解析Markdown格式时会有bug存在。

例如在表格中转义“|”这个竖杠时产生BUG,在生成html时会产生大量<br>,我在写正则表达式笔记时候在Macdown和Atom这些当作都可以正常解析,但是在Hexo中解析不了。

网上提出的解决方法是使用pandoc,进入博客目录:

1
2
$ npm install hexo-renderer-pandoc --save
# ps: 但是我当初没有采用这个,好像还是存在问题,又或者产生了新的问题

还有一种解决方法是在'youblog'/node_modules/marked/lib中marked.js

备份一下然后

1
2
3
4
5
6
7
8
/*在450行左右找到*/
escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
/*改为*/
escape: /^\\([`*\[\]()#+\-.!_>])/,
/*850行左右找到*/
return '<em>' + text + '</em>';
/*改为*/
return '_' + text + '_';

如果文章中有公式使用Mathjax引擎,在使用默认主题的时候

进入'youblog'/themes/landscape/layout/_partial/

  • 仿照别的主题用法在 after-footer.ejs 加入
1
2
3
<% if (theme.mathjax){ %>
<%- partial('mathjax') %>
<% } %>
  • 再新建文件 mathjax.ejs 里面写入

这里因为mathjax提供的官方CDN关闭，采用了第三方的CDN，你也可以自己修改CDN，或者自己搭建mathjax。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  • 之后在theme/landscape/_config.yml配置中加入
1
mathjax: true

这时候你应该可以使用mathjax引擎了,测试一下,新建一个文章hexo n "test",然后输入:

1
2
3
4
5
6
7
8
9
10
11
$$
\begin {aligned} 
\frac{\partial}{\partial \theta_i}J(\theta) &= \frac{\partial}{\partial \theta_i}{\frac{1}{2}}{(h_\theta(x)-y)^2} \\\
&=(h_\theta(x)-y) \frac{\partial}{\partial \theta_i}(\theta_0x_0+\cdots+\theta_nx_n-y) \\\
&=(h_\theta(x)-y)x_i
\end {aligned}  \\
$$

$$
\theta_i:=\theta_i-\alpha\sum_{j=1}^n (h_\theta(x^{(j)})-y^{(j)})x_i^{(j)}
$$

之后hexo g,hexo s测试一下

成功的效果应该如下:

$$
\begin {aligned}
\frac{\partial}{\partial \theta_i}J(\theta) &= \frac{\partial}{\partial \theta_i}{\frac{1}{2}}{(h_\theta(x)-y)^2} \
&=(h_\theta(x)-y) \frac{\partial}{\partial \theta_i}(\theta_0x_0+\cdots+\theta_nx_n-y) \
&=(h_\theta(x)-y)x_i
\end {aligned} \
$$

$$
\theta_i:=\theta_i-\alpha\sum_{j=1}^n (h_\theta(x^{(j)})-y^{(j)})x_i^{(j)}
$$

  • 如果你使用主题,如next,yilia等,一般都会在主题配置文件,_config.yml中找到mathjax的相关设置。一般直接启用就可以了。

服务器

之后需要使用云服务器

我使用的是腾讯云或者阿里云的ubuntu服务器,centos也行,操作差不多。

之后就要下载一些常用的软件

Git

  • 这里用到了git:
1
2
3
4
5
# ubuntu
sudo apt-get install git
# centos
yum install git
# 你要喜欢hub也可以用hub ←_←
  • 设置Git的user name和email:
1
2
3
# 下面的引号里面的东西替换成你的名字和邮箱
$ git config --global user.name "username"
$ git config --global user.email "youmail@mail.com"
  • 之后设置SSH密钥:

如果你之前有了ssh密钥: cat ~/.ssh/id_rsa.pub

没有的话生成密钥: ssh-keygen -t rsa -C "youmail@mail.com"

要不怕以后每次git什么的都要密码的话就直接留空,敲三次回车。

之后一样cat ~/.ssh/id_rsa.pub查看密钥内容:

1
ssh-rsa ....这里是一大串字母什么的.... youmail@mail.com

注：这git什么的你本地配置hexo的时候也需要在本地创建,你看的配置hexo的教程应该都会提到这个。这里不多说。

  • 然后复制这些东西加入到你的github/coding.net的设置里面的SSH keys中,就是找到ssh keys的设置中,点新建密钥(new keys什么的)之后把刚刚cat到的复制到里面,随便起一个名字。

然后测试一下:

1
2
3
4
ssh -T git@github.com

如果没问题会显示如下信息:
Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

这时候git就配置好了。

然后找个目录我就以个人目录为例吧

之后的操作可能需要权限,之后的操作为了方便我就不写sudo了,如果出现Permission denied什么的就自己加权限。

1
2
3
4
5
cd ~
mkdir blog

# 然后把这个目录权限提高,这个目录将作为我的网站目录地址
chmod -R 755 ~/blog

nignx的配置

下载nginx什么的就不说了,而且一般云服务器都会自带有nignx

我以我的Ubuntu服务器为例,自带的是在/usr/local/nginx/中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
cd conf
# 配置文件是nginx.conf先看一下,回车往下翻,q退出
more nginx.conf

# 把第一行的user改为你想要设置的用户,这里我用ubuntu(不推荐,图方便点),一般的是给nginx
# 如果你设置用户为nginx,把nginx程序使用的用户(nginx)给予目录权限,这里目录就是我刚刚mkdir的目录:
chown -R nginx ~/blog

# 之后就是配置nginx.conf
sudo vim nginx.conf
# 第一行不说了
# 然后在http{}中填入类似于:
server{
              listen        80;
              server_name   www.xxx.com;
              root          /home/ubuntu/blog;

        }
# root中填入的是你刚刚创建的博客目录的地址也就是`cd ~/blog` 然后`pwd`的值
# 我试了一下用~/blog不对。。具体我也不清楚,nginx没怎么接触太多
# server_name 填写的是你的域名,要没有的话,就填服务器ip地址。。
# 如果是域名的话看下面
  • 域名解析,刚刚填写的server_name,你要到你自己域名的解析中添加。

我以腾讯云为例,买了域名之后,控制台-云解析-你自己的域名

添加记录类型为A的,主机记录随便你,之后记录值就是你服务器的地址。

2017051214945922734243.png

然后刚刚的server_name就填你刚刚设置的主机记录.域名.com什么的。这里就不再多说。

然后回到刚刚的配置问题,编辑好之后按esc,输如:wq保存退出。

然后

1
2
3
4
# 载入nginx.conf配置,重新启动nginx
/usr/local/nginx/sbin/nginx -s reload /usr/local/nginx/conf/nginx.conf

# 关于nginx更多的可以自行查阅资料

然后就是git clone一些源代码

回到本地

在你创建好的博客中

1
2
hexo g
hexo d

这时候你的博客目录中的public应该会被发送到github/coding.net的仓库中。

然后再在服务器中,克隆你自己的仓库,推荐coding国内比较快…

1
2
3
4
5
cd ~/blog
# coding
git clone git@git.coding.net:xxx/blog.git
# github
git clone git@github.com:xxx/blog.git

之后你访问自己的域名或者服务器地址,应该可以看见你的博客了!

然后你以后发文章更新博客很简单了

1
2
3
4
5
6
7
8
# 本地
hexo n "新文章"
hexo g
hexo d

# 服务器
cd ~/blog
git pull

之后刷新网页,every thing is OK~

你应该能感受到比Github Pages快很多。

ps: 此教程纯手打,转载请注明原文来自http://heywe.cn

Buy me a coffe. XD