腾讯云部署hexo博客系统

最新推荐文章于 2023-02-14 15:24:33 发布

helin9s

最新推荐文章于 2023-02-14 15:24:33 发布

阅读量1.1k

点赞数

分类专栏： linux 文章标签： linux

本文链接：https://blog.csdn.net/qq_30554325/article/details/104088707

版权

linux 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

腾讯云部署hexo博客系统

1、云服务器端配置 git

1. 安装依赖库和编译工具

安装依赖库：

yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel

安装编译工具：

yum install gcc perl-ExtUtils-MakeMaker package

2. 下载 git

选择一个目录来存放下载下来的 git 安装包。这里选择了/usr/local/src 目录

cd /usr/local/src

到官网找一个新版稳定的源码包下载到 /usr/local/src 文件夹里

wget https://www.kernel.org/pub/software/scm/git/git-2.16.2.tar.gz

3. 解压编译 git

在当前目录下解压 git-2.16.2.tar.gz

tar -zvxf git-2.16.2.tar.gz

进入 git-2.16.2.tar.gz 目录下

cd git-2.16.2

执行编译

make all prefix=/usr/local/git

安装 git 到 /usr/local/git 目录下

make install prefix=/usr/local/git

4.配置 git 环境变量

echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc

使 git 环境变量生效

 source /etc/bashrc

查看 git 版本

git --version

如果此时能查看到 git 的版本号，说明我们已经安装成功了。

5. 创建 git 仓库，用于存放博客网站资源。

在 home/git 的目录下，创建一个名为hexoBlog的裸仓库（bare repo）。如果没有 home/git 目录，需要先创建；然后修改目录的所有权和用户权限。

mkdir /home/git/
chown -R $USER:$USER /home/git/
chmod -R 755 /home/git/

然后，执行如下命令：

cd /home/git/
git init --bare hexoBlog.git

刚才这一步主要创建一个裸的 git 仓库。

6. 创建一个新的 git 钩子，用于自动部署。

在 /home/git/hexoBlog.git 下，有一个自动生成的 hooks 文件夹。我们需要在里边新建一个新的钩子文件 post-receive。

vim /home/git/hexoBlog.git/hooks/post-receive

按 i 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 Git 的工作树（源代码）和 Git 目录（配置文件等）。

 \#!/bin/bash 
 git --work-tree=/home/hexoBlog --git-dir=/home/git/hexoBlog.git checkout -f

然后，按 Esc 键退出编辑模式，输入:wq 保存退出。

修改文件权限，使得其可执行。

chmod +x /home/git/hexoBlog.git/hooks/post-receive

7. 绑定github账号

设置全局git账号和用户名

git config --global user.email "1024633414@qq.com"
git config --global user.name "helin9s"

到这里，我们的 git 仓库算是完全搭建好了。下面进行 Nginx 的配置。

2. 云服务器端配置 Nginx

1. 安装测试Nginx

安装

yum install -y nginx

启动 Nginx

systemctl start nginx
systemctl enable nginx.service # 设置为开机启动

测试 Nginx 服务器

wget http://127.0.0.1

能够正常获取以下欢迎页面说明Nginx安装成功。

Connecting to 127.0.0.1:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 43704 (43K) [text/html]
Saving to: ‘index.html’

100%[=======================================>] 43,704      --.-K/s   in 0s

2018-03-09 23:04:09 (487 MB/s) - ‘index.html’ saved [43704/43704]

测试网页是否能打开在浏览器中输入服务器 ip 地址，就是服务器的公网 ip。

2. 配置 Nginx 托管文件目录

接下来，创建 /home/hexoBlog目录，用于 Nginx 托管。

mkdir /home/hexoBlog/ 
chown -R $USER:$USER /home/hexoBlog/ 
chmod -R 755 /home/hexoBlog/

查看 Nginx 的默认配置的安装位置

 nginx -t

修改Nginx的默认配置，其中 cd 后边就是刚才查到的安装位置（每个人可能都不一样）

 vim /etc/nginx/nginx.conf

按方向键，找到如下位置

server {     
   listen 80 default_server;     
   listen [::]:80 default_server;     
   root /home/hexoBlog;    #需要修改          
   server_name www.helin9s.cn; #需要修改          
   # Load configuration files for the default server block.     
   include /etc/nginx/default.d/*.conf;     
   location / {     }     
   error_page 404 /404.html;         
   location = /40x.html {     }

按i键进入插入模式，将其中的 root 值改为 /home/hexoBlog （刚才创建的托管仓库目录）。将 server_name 值改成你的域名(www.helin9s.cn)。

重启 Nginx 服务

systemctl restart nginx

添加 index.html 用于检测配置 Nginx 是否成功

touch /home/hexoBlog/index.html

添加如下代码:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>Nginx running</p>
  </body>
</html>

访问服务器 IP 或者域名（www.helin9s.cn）显示如下内容表示配置成功

Nginx running

至此，服务器端配置就结束了。接下来，就剩下本地 hexo 的配置更改了。

3. 修改 hexo 站点配置文件 git 相关设置

打开你本地的 hexo 博客所在文件，打开站点配置文件（不是主题配置文件），做以下修改。

deploy:
    type: git
    repo: root@17*.***.***.***(服务器ip,内网外网都行):/home/git/hexoBlog.git
    branch: master

cd 你的 hexo 目录
hexo clean
hexo generate
hexo deploy

当你输入hexo d的时候，会要求你输入自己的服务器密码

[root@VM_0_14_centos blog]# hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 8470722] Site updated: 2020-01-07 23:23:16
 31 files changed, 7594 insertions(+)
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 js/script.js
root@172.17.0.14's password: 	# 输入服务器密码

输入成功后显示如下信息则表示发布成功

Counting objects: 50, done.
Compressing objects: 100% (41/41), done.
Writing objects: 100% (50/50), 536.34 KiB | 7.55 MiB/s, done.
Total 50 (delta 5), reused 0 (delta 0)
To 172.17.0.14:/home/git/hexoBlog.git
   fe1be6d..8470722  HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'root@172.17.0.14:/home/git/hexoBlog.git'.
INFO  Deploy done: git

打开你的公网 IP，看是不是已经部署成功了。

4. 更换hexo主题

1. 安装

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2. 配置

修改hexo根目录下的 _config.yml ： theme: yilia

3. 更新

cd themes/yilia
git pull

4. 配置

在hexo根目录下的themes/yilia/_config.yml，请根据自己需要修改使用。完整配置例子，可以参考我的博客备份

# Header
menu:
  主页: /
  随笔: /tags/随笔/

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 

# Content

# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: http://helin9s.cn/logo.jpg

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家

5. 主题相关设置

5.1 “所有文章”按钮的安装

首先使用命令 node -v 检查版本是不是大于 6.2

在博客根目录执行以下命令：

npm i hexo-generator-json-content --save

在博客配置文件 _config.yml 最下面加上：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

5.2 添加图片资源文件夹

在 themes/yilia/source/ 或source/下，可添加一个 img 文件夹，里面存放图片资源即可。

需要添加头像或者微信/支付宝二维码图片，直接引用即可。路径为 themes/yilia/_config.yml 。

# 微信二维码图片
weixin:  /assets/img/wechat.png

# 头像图片
avatar:  /assets/img/head.jpg

# 网页图标
favicon:  /assets/img/head.jpg

5.3文章显示摘要

在你 MD 格式文章正文插入  即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉文件 themes/yilia/_config.yml 里的：

# excerpt_link: more

5.4 文章显示目录

增加文章目录 TOC ( table of content )，方便阅读文章，在 themes/yilia/_config.yml 中进行配置 toc: 2 即可，它会将你 Markdown 语法的标题，生成目录，目录查看在右下角。

5.5 增加归档菜单

修改 themes/yilia/_config.yml 内容：

menu:
    主页:  /
    归档:  /archives/index.html

5.6 修复失效的微信分享二维码

打开 themes\yilia\layout\_partial\post\share.ejs 文件

把第49行中的 //pan.baidu.com/share/qrcode?url= 修改为：

//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

5.7更改左侧昵称字体

在 themes\yilia\source\main.0cf68a.css 文件里面修改，找到 header-author ，修改里面的 font-family ，改成：

<!--修改前-->
font-family:Roboto,serif
<!--修改后-->
font-family:STCaiyun,STXingkai

5.8 左侧显示总文章数

打开 themes\yilia\layout\_partial\left-col.ejs 文件

在：

<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>

后面添加：

<nav>
    总文章数 <%=site.posts.length%>
</nav>

5.9 添加字数统计

首先安装 hexo-wordcount

使用如下命令安装：

npm i --save hexo-wordcount

Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)

npm install hexo-wordcount@2 --save

然后在 themes\yilia\layout\_partial\left-col.ejs中添加：

<nav>
    总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>
</nav>

添加位置在如下代码的下面：

<nav>
    总文章数 <%=site.posts.length%>
</nav>

编辑 themes\yilia\layout\_partial\article.ejs

在header下面加入：

<div align="center" class="post-count">
    字数：<%= wordcount(post.content) %>字 | 预计阅读时长：<%= min2read(post.content) %>分钟
</div>

即可显示单篇字数和预计阅读时长。

5.10 添加来必力(livere)评论系统

yilia 默认带了几个系统，但是没有来必力，所以可以自己加

首先是去注册来必力，然后获取到自己的 id

新建 themes\yilia\layout\_partial\comment\livere.ejs 文件，输入如下内容：

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
    })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

然后编辑 themes\yilia\layout\_partial\article.ejs 文件，找到：<% if (!index && post.comments){ %> ，添加：

<% if (theme.livere){ %>
<%- partial('comment/livere', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

在主题配置文件 themes\yilia\_config.yml 中添加以下内容：

livere: true
livere_uid: 你的id

helin9s

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

腾讯云部署hexo博客系统

腾讯云部署hexo博客系统

1、 云服务器端配置 git

1. 安装依赖库和编译工具

2. 下载 git

3. 解压编译 git

4.配置 git 环境变量

5. 创建 git 仓库，用于存放博客网站资源。

6. 创建一个新的 git 钩子，用于自动部署。

7. 绑定github账号

2. 云服务器端配置 Nginx

1. 安装 测试Nginx

2. 配置 Nginx 托管文件目录

3. 修改 hexo 站点配置文件 git 相关设置

4. 更换hexo主题

1. 安装

2. 配置

3. 更新

4. 配置

5. 主题相关设置

5.1 “所有文章”按钮的安装

5.2 添加图片资源文件夹

5.3文章显示摘要

5.4 文章显示目录

5.5 增加归档菜单

5.6 修复失效的微信分享二维码

5.7更改左侧昵称字体

5.8 左侧显示总文章数

5.9 添加字数统计

5.10 添加来必力(livere)评论系统

1、云服务器端配置 git

1. 安装测试Nginx