Hexo博客部署到Linux服务器上

2022-05-05 15:47:10 浏览数 (1)

以前Hexo博客是托管到github上,因为国内访问github速度有些慢,这次试着把博客部署到阿里云的服务器上。本地系统Windows10上需要安装node.js hexo。下面做一个详细的介绍。

本地端
安装git bash(git安装原文来自百度经验)

由于使用的是git命令。所以需要安装git bash,安装过程如下。

由于安装过程千篇一律,安装的详细过程请百度一下:

图文详解Windows下安装最新版Git_百度经验

安装node.js
1、Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

本文实例以 v0.10.26 版本为例,其他版本类似, 安装步骤:

步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:

步骤 2 : 点击以上的Run(运行),将出现如下界面:

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

步骤 4 : Node.js默认安装目录为 “C:Program Filesnodejs” , 你可以修改目录,并点击 next(下一步):

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。然后并点击 next(下一步):

安装过程:

点击 Finish(完成)按钮退出安装向导。

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入”cmd” => 输入命令”path”

代码语言:javascript复制
PATH=C:oraclexeapporacleproduct10.2.0serverbin;C:Windowssystem32;
C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;
c:python32python;C:MinGWbin;C:Program FilesGTK2-Runtimelib;
C:Program FilesMySQLMySQL Server 5.5bin;C:Program Filesnodejs;
C:UsersrgAppDataRoamingnpm

我们可以看到环境变量中已经包含了C:Program Filesnodejs

检查Node.js版本

2、Windows 二进制文件 (.exe)安装

32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node.exe

64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node.exe

安装步骤

步骤 1 : 双击下载的安装包 Node.exe ,将出现如下界面 :

点击 Run(运行)按钮将出现命令行窗口:

版本测试

进入 node.exe 所在的目录,如下所示:

node-version

如果你获得以上输出结果,说明你已经成功安装了Node.js。

Hexo安装
利用命令行安装hexo

Node.js安装完成后,在电脑任意位置,右键,选择 GitBash ,执行npm命令

代码语言:javascript复制
npm install -g hexo
创建本地hexo文件夹(地址名字可自定义)

安装完成后,在本地选择一个目标文件夹(如:F:Hexo),注意:在F:Hexo文件夹内右键,选择GitBush,执行以下指令,Hexo就会自动在目标文件夹下创建建立网站所需要的文件,一分钟左右会执行完成

代码语言:javascript复制
hexo init

安装依赖包,该命令执行后没有什么提示,完成后的本地文件夹列表为图示,可能会有所不同

代码语言:javascript复制
hexo install

注意:因Hexo 3.0以后把服务器独立成了单独的模块,所以还需要安装hexo-server才可以使用,执行命令

代码语言:javascript复制
npm install hexo-server –save
本地校验查看

到目前为止,我们已经搭建起本地的hexo博客了,执行以下命令(在F:Hexo)中,然后根据提示到浏览器中进行访问,地址为 localhost:4000

代码语言:javascript复制
hexo g 或者 hexo generate
hexo server 或者 hexo s

如果访问成功,即代表了本地博客配置成功,但有以下几点需要注意:

  • 每次想访问本地博客,至少需要执行hexo s命令,这样才相当于服务启动,然后才可访问
  • 有的电脑4000端口可能被占用,导致每次访问localhost:4000提示一直找不到网页,这时就需要修改端口号,执行命令 hexo s -p 5000 即代表使用-p将端口号改为了5000,访问网址为localhost:5000
Hexo主题设置

你可以在官网 或者 https://github.com/hexojs/hexo/wiki/Themes 选择你需要的主题 下载主题

代码语言:javascript复制
$ git clone <repository> themes/<theme-name>

启用主题修改your_blog_name目录下的_config.yml配置文件中的theme属性,将其设置为上面的 theme-name修改设置后如果在浏览器中没有看到想要的效果,使用 hexo clean来清除缓存,然后重新生成静态文件 hexo g修改主题修改主题是在 themeyour_theme 目录下进行相关操作的,本节内容主要讲的是修改 raytaylorism 主题。使用 raytaylorism 主题的注意事项在该主题的官方 github 地址中已经说明得很清楚了,只需要严格按照开发者要求做,就不会出现什么大问题。

  1. 如果你想使用英文语言,建议将 languages 下的 default.yml 文件名修改为 en.yml,因为我在电脑上使用 default.yml 的时候,网页的语言会偶尔变成中文或者繁体,不知道什么原因。
  2. 如果你觉得正文在大屏幕下显得太窄(默认为700px定宽),可以修改 sourcecss_baselib_customize.styl 中的 .container 类的宽度设置,修改之后往往会出现右侧的目录栏与正文重叠的情况,继续修改 sourcecss_partialtablecontents.styl 里面的 left calc(50% 350px) ,建议修为 350px 为你的正文宽度的一半,或者你自行调整直至满意。
  3. layout_partialpluginreward.ejs 文件中可以替换转账二维码和显示的“打赏文本”。
  4. 站点分析工具我使用的是百度分析平台,在 _config.yml 配置文件中添加
代码语言:javascript复制
baidu_analytics:

然后将你的百度分析ID添加在后面。接着在

代码语言:javascript复制
layout_partialpluginanalytics.ejs

文件后面添加如下代码:

代码语言:javascript复制
<% if (theme.baidu_analytics){ %>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>

为 raytaylorism 主题添加统计站点访问量的功能:在

代码语言:javascript复制
layout_partialafter_footer.ejs

文件中添加如下代码:

代码语言:javascript复制
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后将

代码语言:javascript复制
layout_partialfooter.ejs

文件中最后一个

代码语言:javascript复制
<p>

元素替换成下面的代码:

代码语言:javascript复制
<p class="right" style="margin-top: 0;">
<span id="busuanzi_container_site_uv" style="display: none;">
您好,您是本站点的第 <span id="busuanzi_value_site_uv" style="color: yellow;"></span> 位访客,祝您生活工作愉快
</span></p>

如果想给每篇文章添加统计阅读量,我的做法是在

代码语言:javascript复制
layout_partialaticle.ejs

文件中的

代码语言:javascript复制
<%- partial('post/time') %>

行后面添加如下代码:

代码语言:javascript复制
<div style="float: right;color: #E91E63">
<span id="busuanzi_container_page_pv" style="display: none;">
阅读次数 <span id="busuanzi_value_page_pv"></span>
</span></div>

提醒,不要把上面的代码添加到

代码语言:javascript复制
layout_partialposttime.ejs
服务器端

在服务器端,我们需要完成以下几件事情。

  1. 为本地的 hexo_blog 配置一个部署静态文件的远程仓库。
  2. 配置 Nginx 托管博客文件目录。
  3. 配置远程仓库自动更新到博客文件目录的钩子。
创建私有 Git 仓库

/git/lvshen/下,创建一个名为 hexo_static的裸仓库(bare repo)。

然后修改目录的所有权和用户权限,之后 linux 用户都具备/git/lvshen/ 目录下所有新生成的目录和文件的权限。

代码语言:javascript复制
sudo mkdir /git/lvshen/
sudo chown -R $USER:$USER /git/lvshen/
sudo chmod -R 755 /git/lvshen/

然后,执行如下命令:

代码语言:javascript复制
cd /git/lvshen/
git init --bare hexo_static.git
创建 Git 钩子

接下来,在服务器上的裸仓库 hexo_static 创建一个钩子,在满足特定条件时将静态 HTML 文件传送到 Web 服务器的目录下,即 /home/lvshen/hexo

在自动生成的 hooks 目录下创建一个新的钩子文件:

代码语言:javascript复制
vim /home/git/wade/konwledge.git/hooks/post-receive

在该文件中添加两行代码,指定 Git 的工作树(源代码)和 Git 目录(配置文件等)。

代码语言:javascript复制
#!/bin/bash

git --work-tree=/home/nginx/html/doc/bl/lvshen --git-dir=/git/lvshen/konwledge.git checkout -f

保存并退出文件,并让该文件变为可执行文件。

代码语言:javascript复制
chmod  x /home/git/wade/konwledge.git/hooks/post-receive
配置 Nginx 托管文件目录

接下来,创建 /home/nginx/html/doc/bl/lvshen 目录,用于 Nginx 托管。

代码语言:javascript复制
sudo mkdir -p /home/nginx/html/doc/bl/lvshen

和上一步类似,这里也需要修改目录的所有权和权限。

代码语言:javascript复制
sudo chown -R $USER:$USER /home/nginx/html/doc/bl/lvshen
sudo chmod -R 755 /home/nginx/html/doc/bl/lvshen

然后,修改 Nginx 的 conf 设置:

代码语言:javascript复制
sudo vim /home/nginx/conf/vhost/bl.wadecn.com.conf

将其中的 root 指令指向/home/nginx/html/doc/bl/lvshen 目录。

代码语言:javascript复制
sserver {
        listen          9000;
        server_name     bl.wadecn.com;
        index           index.html index.htm index.php;
        root            /home/nginx/html/doc/bl/lvshen;
        #/home/nginx/html/doc
        #log_format bl.wadecn.com '$remote_addr - $remote_user [$time_local] $request'
        #'$status $body_bytes_sent $http_referer '
        #'$http_user_agent $http_x_forwarded_for';
        #access_log  log/bl.wadecn.com.log doc.wadecn.com;
}

保存并退出文件。如果以后购买并备案域名之后,可以再将配置中的 default_server 修改为你的域名。

最后,重启 Nginx 服务,使得改动生效。

代码语言:javascript复制
[root@bogon conf]# /home/nginx/sbin/nginx -s reload        #重启nginx
建立SSH信任关系

为了在本地能不需要密码的上传代码到服务器,需要在本地生成一个密匙并与服务器关联。

代码语言:javascript复制
#在本地生成公钥和密钥:
ssh-keygen -t rsa
#将本机生成的公钥发送到服务器上(建立信任关系):
ssh-copy-id -i C:/Users/UserName/.ssh/id_rsa.pub root@server_ip       #UserName是电脑的用户名
#测试ssh远程登录是否成功:
ssh root@server_ip

这样前后端的配置都完成了。我下载了一个主题:

代码语言:javascript复制
$ git clone https://github.com/iTimeTraveler/hexo-theme-hiker.git themes/hiker

0 人点赞