以前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
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 地址中已经说明得很清楚了,只需要严格按照开发者要求做,就不会出现什么大问题。
- 如果你想使用英文语言,建议将 languages 下的 default.yml 文件名修改为 en.yml,因为我在电脑上使用 default.yml 的时候,网页的语言会偶尔变成中文或者繁体,不知道什么原因。
- 如果你觉得正文在大屏幕下显得太窄(默认为700px定宽),可以修改
sourcecss_baselib_customize.styl
中的.container
类的宽度设置,修改之后往往会出现右侧的目录栏与正文重叠的情况,继续修改sourcecss_partialtablecontents.styl
里面的left calc(50% 350px)
,建议修为350px
为你的正文宽度的一半,或者你自行调整直至满意。 - 在
layout_partialpluginreward.ejs
文件中可以替换转账二维码和显示的“打赏文本”。 - 站点分析工具我使用的是百度分析平台,在 _config.yml 配置文件中添加
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
服务器端
在服务器端,我们需要完成以下几件事情。
- 为本地的 hexo_blog 配置一个部署静态文件的远程仓库。
- 配置 Nginx 托管博客文件目录。
- 配置远程仓库自动更新到博客文件目录的钩子。
创建私有 Git 仓库
在/git/lvshen/
下,创建一个名为 hexo_static
的裸仓库(bare repo)。
然后修改目录的所有权和用户权限,之后 linux 用户都具备/git/lvshen/
目录下所有新生成的目录和文件的权限。
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 托管。
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
设置:
sudo vim /home/nginx/conf/vhost/bl.wadecn.com.conf
将其中的 root 指令指向/home/nginx/html/doc/bl/lvshen
目录。
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