博客搭建到部署教程

环境配置

在正式安装 Hexo 之前,我们需要确认电脑中是否已安装下列应用程序:

  • GitHub 账号

  • Node.js

    详情安装教程
    查看Node版本:node -v

  • Git

    详情安装教程
    查看git版本:$ git version

    • 打开git的.ssh目录(我的是C:\Users\Administrator.ssh),然后右键git bash如下图:
    • 执行如下命令:
      1
      2
      3
      4
      git config --global user.name "你的用户名"  
      git config --global user.email 你的邮箱
      ssh-keygen -t rsa -C "你的邮箱"
      // 记住三下回车,提示y/n就输入y
    • 添加SSH key到github或者gitee: 复制密钥文件内容(路径形如C:\Users\Administrator.ssh\id_rsa.pub),粘贴到New SSH Key即可
    • 测试是否添加成功。在命令行(即Git Bash)依次输入以下命令,返回“You’ve successfully authenticated”即成功
      1
      $ ssh -T git@github.com

在本地安装Hexo

全局安装Hexo,在cmd中运行以下命令:
npm install -g hexo-cli

安装淘宝镜像源:

方式一:npm install -g cnpm –registry=https://registry.npm.taobao.org
方式二:npm config set registry https://registry.npm.taobao.org
检验:npm config get registry
再安装:
npm install -g cnpm

所有必备的应用程序安装完成后,即可使用 cnpm 安装 Hexo。在blog文件下右键点击Git Bash here,输入如下命令:

常用命令

hexo g #完整命令为hexo generate,生成静态文件
hexo s #完整命令为hexo server,启动服务器,本地可以测试
hexo d #完整命令为hexo deploy,将本地编译好的静态文件发布到github上
hexo n #完整命令为hexo new,新建一篇文章
hexo clean #清除当前项目的静态文件
hexo clean && hexo g && hexo s
hexo clean && hexo douban -bgm && hexo g && hexo s #加载豆瓣插件部署博客

安装hexo

以下都是在博客根目录下操作~/blog

npm install -g hexo

初始化博客

$ hexo init

安装本地预览服务

在博客根目录 npm i hexo-server

生成和本地预览

$ hexo clean && hexo g && hexo s

查看浏览器:localhost:4000

原始界面

部署博客到 GitHub Pages

  • 创建一个repo,名称为yourname.github.io, 其中yourname是你的github名称,按照这个规则创建才有用
  • npm install hexo-deployer-git –save

  • 更改自己博客的_config.yml文件,找到如下代码
    1
    2
    3
    4
    deploy:
    type: git
    repo: 仓库的ssh链接
    branch: master
  • 上传到自己建立的仓库:hexo clean && hexo g && hexo deploy
  • 访问网站方式:https://yourname.github.io/
    具体可以参考

部署到gitee

基本步骤跟github的相同,但是有几个需要注意的点:
1.hexo的yml配置文件,一致

2.需要额外修改root路径,否则css这种静态资源加载不到:

  • blog是你的仓库名
  • url是你仓库在服务里面开通pages后的访问博客地址

    注意

    搭建好了博客,也有了hexo,但是报错:ERROR Local hexo not found in D:\hexo 解决:

1.cmd进入博客当前文件夹路径
2.执行 npm install
3.执行 hexo server
4.执行成功后,再到博客下的git中执行 hexo d /hexo g 发现可以执行成功。

部署到服务器

以下我以阿里云服务器的centos系统为例:
1.搭建git环境
xshell进入后台,安装git

yum install git

然后

git –version

查看git版本
创建一个git用户,然后按照以下代码步骤一步一步完成:

1
2
3
4
5
6
7
8
9
10
11
12
13
adduser git //添加git用户
passwd git // 设置git密码
su git // 切换用户
cd /home/git/ //进入git目录
mkdir -p projects/blog // 创建文件来放置hexo静态工程
mkdir repos && cd repos //创建文件放置git仓库
git init --bare blog.git // 创建一个裸露的仓库
cd blog.git/hooks //进入钩子目录
vi post-receive //创建hook钩子函数(git提交时自动部署)

hook钩子函数内容: (注xshell命令vi/vim这两个命令的用法,输入之后按一下i字母键代表输入,输入完了之后,先按Esc键,再输入:wq代表保存退出,:q是退出不保存)
#!/bin/sh
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f

修改权限

1
2
3
chmod +x post-receive
exit // 退出到 root 登录
chown -R git:git /home/git/repos/blog.git // 添加权限

2.建立ssh免密登录:
这里注意,还是git用户,不能退出,不能切换到root管理用户
创建authorized_keys文件

1
2
3
4
5
6
7
8
su git     //切换git用户
cd /home/git //进入git目录
mkdir .ssh //创建免密公匙目录
cd /home/git/.ssh //注意是用git用户进这个目录,不是root
touch authorized_keys //存放客户端的ssh公钥(id_rsa.pub)
chmod 600 authorized_keys //配置权限
cd .. //退出.ssh目录
chmod 700 .ssh //.ssh目录必须700权限

然后用winscap远程连接服务器,打开这个文件,注意看以下操作:
客户端本地(就是我自己的电脑)进入.ssh目录,右键git bash,同上面的操作,然后输入如下命令:
cat id_rsa.pub,复制公匙key,从ssh-rsa开始复制到最后的邮箱地址.com,如下图:
免密key

粘贴到刚刚前面winscap打开的authorized_keys里面,复制完了注意,粘贴的时候后面不能有任何的空格和回车,最后是鼠标点到最后,按del键清空下,这里就是把本地的id_rsa.pub内容复制到authorized_keys里面
测试下能否本地免密登录,首次联系会提示你输入yes,然后输入密码,如下图:
首次连接
免密成功

到这里免密成功,服务器git环境搭建完成,测试下能否可能服务器的目录到本地:
随便打开一个文件夹,输入以下命令:

1
git clone git@server_ip:/home/git/repos/blog.git

成功以后如下:
克隆成功

3.限制git登录
git用户的登录权限禁掉,只能clone和push,修改目录/etc/下面的passwd文件

1
2
3
4
cat /etc/shells // 查看`git-shell`是否在登录方式里面,有则跳过
which git-shell // 查看是否安装
vi /etc/shells
添加(which git-shell)显示出来的路劲,通常在 /usr/bin/git-shell

修改

1
2
cd /etc  
vi passwd

更改方式如下:

1
2
3
4
将原来的
git:x:1000:1000:/home/git:/bin/bash //原来的
修改为:
git:x:1000:1000:/home/git:/usr/bin/git-shell //修改后的

4.nginx配置
这里非常重点,特别注意,容易出很多错。所以在root根目录,先执行以下几个命令,执行过程中就不会报错了:

1
2
3
4
yum update  //更新  
yum -y install pcre-devel openssl openssl-devel
yum -y install gcc-c++
yum install -y zlib-devel

然后安装nginx,执行以下命令,一步一步来:

1
2
3
4
5
centos8系统自带nginx,所以直接yum  
yum install nginx //安装
nginx -t //测试安装
systemctl enable nginx //添加系统自启动
systemctl start nginx //启动服务,还有stop/restart

以上代码只要前面的环境都安装了,到这里不会报任何错误的,然后修改nginx配置文件:

1
2
3
4
cd /etc/nginx/
vi nginx.conf
修改 root 路径为: /home/git/projects/blog;
同时将 user 改为 root

如下图,改三个地方:
修改处

1
2
3
#user everyone;修改为user root; //注意去掉#字符  
server_name localhost;修改为server_name 你的域名or公网IP
root index;修改为root /home/git/projects/blog;

改完后记得systemctl restart nginx,就可以访问你的域名啦

1
npm  run  start

5.修改hexo配置
返回本地hexo根目录,找到_system.yml,代码样式如下:

1
2
3
4
deploy:
type: git
repo: git@serverId:/home/git/repos/blog.git //serverID是你的服务器地址或者git地址
branch: master

如果有多个仓库,repo这里填写方式一定要特别注意:

1
2
3
repo:
linxu: git@serverId:/home/git/repos/blog.git //注意缩进
github: git@your git site //注意缩进

每个仓库都可以命名一个名称,我自己的就写的linxu,还有例如github等等,这个可以随便写,没有规定,但是要

特别注意,多个仓库并列,必须要缩进,不能和repo并齐,否则上传会出错

6.上传测试
至此,所有配置均完成,然后本地cmd写一篇文章测试下

hexo new hello

生成的hello.md文件在myblog/source/_pos下面,打开可以看到发现默认的文章title就是你新建的hello.md

的hello,这里有个小技巧,修改myblog\scaffolds下面的post.md,如下:

1
2
3
4
5
title: {{ title }}  //标题:注意窍门,hexo new的是你网页打开的链接显示,title可以改成中文
date: {{ date }} //时间轴
top: //置顶排序,数字越大越靠前
categories: //分类
tags: //标签

这样下次新建文章,就带有上面的这些字段了,

博客美化

两个yml文件

以下next主题为例:

  • 站点配置文件,位于站点文件夹根目录内
    • ~/blog/_config.yml
  • 主题配置文件,位于主题文件夹根目录内
    • ~/blog/themes/next/_config.yml

      主题更换

      如更换成yilia主题
  • 下载主题
  • 配置文件 _config.yml 中指定所使用的 theme:yilia
  • 安装插件
    • npm install –save-dev 插件名
  • 注:可以使用cnpm替换npm,下载速度更快,安装淘宝镜像源即可。

    yilia主题

  1. 起初小杨是根据B站视频来搭建的,选择的yilia主题hexo + yilia主题
    但是主题里面都没有很是中意的,遂改成了Next主题,更加符合我的审美。
  2. 具体的主题优化配置可以参考如下文档:

Next主题

###动态背景
仰慕很久了的,总觉得很好玩

  • 在主题配置文件中,靠后面,改 canvas_nest: true,想要更改颜色和数量?请参考
    修改文件:

    文件位置:~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js
    ###使用腾讯云给博客添加动态相册功能
    参考小鸡,哈哈,所有的坑我都踩过一遍了,最后幸好出来了
    基于此,完善步骤如下:

1.创建腾讯云cos存储桶

2.跨域访问cors设置

  • 在基础配置中找到cors设置
    引用小鸡的
    origin源可以先填为*,然后后面成功了再改成自己的博客地址
    引用小鸡的

3.Policy权限设置

  • 存储桶访问权限:一般共有读私有写就行, 权限不配置访问存储桶域名可能会依然出现error节点

4.本地创建相册页面
>$ hexo new page photos
* 编辑source/photos路径下的index.md文件,写入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<div id="box" class="box"></div>

<script type="text/javascript">

function loadXMLDoc(xmlUrl)
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}

try
{
xmlDoc.async=false;
xmlDoc.load(xmlUrl);
}
catch(e) {
try //Google Chrome
{
var chromeXml = new XMLHttpRequest();
chromeXml.open("GET", xmlUrl, false);
chromeXml.send(null);
xmlDoc = chromeXml.responseXML.documentElement;
//alert(xmlDoc.childNodes[0].nodeName);
//return xmlDoc;
}
catch(e)
{
alert(e.message)
}
}
return xmlDoc;
}

var xmllink="你的访问域名链接"
//访问域名链接就是我上面提到的那个访问域名xml链接

xmlDoc=loadXMLDoc(xmllink);
var urls=xmlDoc.getElementsByTagName('Key');
var date=xmlDoc.getElementsByTagName('LastModified');
var wid=250;
var showNum=12; //每个相册一次展示多少照片
if ((window.innerWidth)>1200) {wid=(window.innerWidth*3)/18;}
var box=document.getElementById('box');
var i=0;

var content=new Array();
var tmp=0;
var kkk=-1;
for (var t = 0; t < urls.length ; t++) {
var bucket=urls[t].innerHTML;
var length=bucket.indexOf('/');
if(length===bucket.length-1){
kkk++;
content[kkk]=new Array();
content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
tmp=1;
}
else {
content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
}
}

for (var i = 0; i < content.length; i++) {
var conBox=document.createElement("div");
conBox.id='conBox'+i;
box.appendChild(conBox);
var item=document.createElement("div");
var title=content[i][0].url;
item.innerHTML="<button class=title style=background:url("+xmllink+'/'+title+"封面.jpg"+");><span style=display:inline;><strong style=color:#f0f3f6; >"+title.substring(0,title.length-1)+"</strong></span></button>";
conBox.appendChild(item);

for (var j = 1; j < content[i].length && j < showNum+1; j++) {
var con=content[i][j].url;
var item=document.createElement("li");
item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+content[i][j].date+"</p>";
conBox.appendChild(item);
}
if(content[i].length > showNum){
var moreItem=document.createElement("button");
moreItem.className="btn-more-posts";
moreItem.id="more"+i;
moreItem.value=showNum+1;
let cur=i;
moreItem.onclick= function (){
moreClick(this,cur,content[cur],content[cur][0].url);
}
moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
conBox.appendChild(moreItem);
}
}

function moreClick(obj,cur,cont,title){
var parent=obj.parentNode;
parent.removeChild(obj);
var j=obj.value;
var begin=j;
for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
console.log( Number(showNum) + Number(begin));
var con=cont[j].url;
var item=document.createElement("li");
item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+cont[j].date+"</p>";
parent.appendChild(item);
}
if(cont.length > j){
obj.value=j;
parent.appendChild(obj);
}
}

</script>

* 相册样式可以自行去调整
* 注意:
* 存储桶中应该必须是文件夹,不能图片和文件夹同级,否则报错:Uncaught ypeError: Cannot set property ‘0’ of undefined,

手动修改博客css样式,打造属于自己的博客样式

  • F12手动查看网页
  • 自己主题的themes extsourcecss_custom目录下的custom.styl文件

    自定义文章底部版权声明

  1. 在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ,内容如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    {% if page.copyright %}
    <div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

    <!-- JS库 sweetalert 可修改路径 -->
    <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
    <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

    <p><span>本文标题:</span>{{ page.title }}</a></p>
    <p><span>文章作者:</span>{{ theme.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
    </p>
    <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
    </div>
    <script>
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
    $(".fa-clipboard").click(function(){
    swal({
    title: "",
    text: '复制成功',
    html: false,
    timer: 500,
    showConfirmButton: false
    });
    });
    }));
    </script>
    {% endif %}
  2. 在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl,内容如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #333333; // title color
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #0593d3; // link color
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }
  3. 修改 themes/next/layout/_macro/post.swig ,如下:
    在代码
    1
    2
    3
    4
    5
    {% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
    {% include 'wechat-subscriber.swig' %}
    </div>
    {% endif %}
    之前,新增如下代码:
    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    {% include 'my-copyright.swig' %}
    {% endif %}
    </div>
  4. 打开 themes/next/source/css/_common/components/post/post.styl 文件,在最后一行增加代码:
    1
    @import "my-post-copyright"
  5. 设置新建文章自动开启 copyright ,即新建文章自动显示自定义的版权声明,设置 ~/scaffolds/post.md 文件,如下:
    1
    2
    3
    4
    5
    ---
    title: {{ title }}
    date: {{ date }}
    copyright: true #新增,开启
    ---

    建立标签云及效果展示

    Hexo博客建立标签云及效果展示

    Hexo文章简单加密访问

    教程:密码 password

    在Hexo博客中加入豆瓣读书页面

    参考链接

参考文档:打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
参考文档:Hexo NexT主题美化2.0
参考文档:hexo部署到个人服务器

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信