博主个人博客已经搭建好,可以移步访问 http://lss-coding.top/
description: 本篇文章是我使用 Coding+Hexo 的整体过程。
在很早很早以前就想着做一个自己的博客系统,因为之前使用的 CS某N 感觉广告太多,别的平台没有怎么使用过,想着自己做一个按照自己想法的博客网站,2020年9月在阿里云购买了一个服务器和一个域名,那时候购买只是想着体验一下,后来2021年1月份左右有想法做一个自己的博客系统,然后第一个版本使用 Spring,SpringMVC,Mybatis,tomcat,maven,editormd等技术编写,可是到最后发现一些前端的 md 格式的转换有问题,持续了15天没有找到解决方法,后来也就停止编写了,第二个版本是使用 SpringBoot,比较方便,这是在 bilibili 看到的一个整套的博客系统的视频,所以跟着写下来了,但是到了 7 月中旬左右发现我的阿里云服务器还有一个月到期了,也就是说还需要花钱去续费,然后考虑到自己资金的问题就取消了在阿里云服务器上运行了,这个基于 SpringBoot 的博客系统是已经完工了,整体可以运行的,就是服务器的问题,所以停止使用了,有兴趣可以参考一下我的 gitee 仓库地址:
知道服务器过期后想着找一个免费的搭建博客的工具,然后想起来之前使用过的一个 GitHub Pages,但是 github 服务器在国外,访问比较慢,所以没有使用,国内有相对应的 Gitee,然后发现这个正在维护,没有办法新建 Gitee Pages,所以也没有使用这个工具。最后束手无策的时候想到了 Coding,这个也是类似于 Github 的代码托管平台,但是这个是国内的访问也是没有问题的,但是一个缺点就是这个网站经常性的瘫痪,但是我觉的搭建博客也就是搭建好之后就不怎么需要登入这个网址,所以最后敲定以这个为基础进行搭建,使用网上比较流行的、自认为主题比较美观的 Hexo。最终,2020年8月1日,我的基于Coding+Hexo的博客正式上线使用了,访问地址:www.lss-coding.top
1. 注册 Coding 平台
https://coding.net/
进入官网然后注册就可以了,注册好了之后创建一个代码仓库,用于托管博客项目
2. 下载并安装 Git
https://git-scm.com/
Git 需要使用命令进行项目的部署,这个自行下载安装即可,上方官网
3. 绑定 Coding 并提交文件
以上已经完成了 Coding 的注册和 Git 的安装,下面需要将 Git 和 Coding 进行绑定,绑定是为了方便我们上传文件。
虽然在Coding上我们可以直接上传文件,但是我试了一下发现并不好用,点击上传完全没反应,可能是网络的原因吧。所以我们利用SSH来完成Coding的绑定并提交文件,这样很方便快捷。首先来简单介绍一下SSH协议。
SSH(安全外壳协议,Secure Shell 的缩写)是建立在应用层基础上的安全协议。SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议,利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。简单来说,SSH就是保障你的账户安全,将你的数据加密压缩,不仅防止其他人截获你的数据,还能加快传输速度。如果想详细了解的话,可以看这篇文章:详述 SSH 的原理及其应用 - CSDN,下面就详细介绍如何绑定Coding和提交文件。
3.1 绑定 Coding
我们要用git上传文件到Coding首先得利用SSH登录远程主机,而登录方式有两种:一种是口令登录;另一种是公钥登录。口令登录每次都要输入密码十分麻烦,而公钥登录就省去了输入密码的步骤,所以我们选择公钥授权。首先我们得在 Coding上添加 SSH key 配置,要想生成SSH key,就要先安装 SSH,不过我们安装了 Git Bash,其应该自带了 SSH。检验一下是否安装 SSH,我们在新建的文件夹中右键打开 Git Bash:
在 Git Bash 中执行命令 ssh-keygen -t rsa
生成公钥,windows系统的在下面路径
打开赋值里面的内容,然后进入 Coding,个人账户设置 — SSH公钥 — 新增公钥,然后将刚才生成文件的内容粘贴到此处
验证是否成功,我们可以通过在 Git Bash 中输入 ssh -T [git@github.com](mailto:git@github.com)
进行检验:
3.2 提交文件
-
进入 Coding 仓库
-
找到仓库链接,复制这个链接
-
在本地创建的文件夹中打开 Git Bash
执行命令:
git clone 链接地址
然后在本地文件夹中就可以看到与 Coding 仓库中相同的文件了
-
测试是否能上传成功
在文件夹中创建一个 test.txt 文件
然后打开 Git Bash执行以下命令
git add . git commit -m "提交信息" git push
-
第二种建立连接的方法是
在本地文件夹中执行命令
git init
进行初始化执行命令
git remote add origin 远程仓库
,关联远程仓库然后输入命令
git pull origin master
同步远程仓库和本地仓库
4. 安装 NodeJs
- 下载 NodeJs
官网: https://nodejs.org/en/
下载好之后进行安装,只需要修改一下安装地址即可,其他下一步默认。
安装完成后打开 cmd 查看是否安装成功
- 设置 npm 在安装全局模块时的路径和环境变量
因为如果不设置的话,安装模块的时候就会把模块装到C盘,占用C盘的空间,并且有可能安装好hexo后却无法使用,所以我们需要设置一下:
在 nodejs 文件中新建两个空文件夹 node_cache、node_global
打开 cmd 执行以下两行命令:
npm config set prefix "...\node_global"
npm config set cache "...\node_cache"
- 设置环境变量:
- 系统变量中新建变量:NODE_PATH,值为 E:\nodejs\node_global\node_modules
- 编辑用户变量中的 path,将相应 npm 的路径改为: E:\nodejs\node_global
然后在 cmd 命令下执行 npm install webpack -g
:
然后在 webpack 这个模块已经在我们设置默认的文件夹中了:
5. 安装 Hexo
-
创建仓库
Hexo就是我们的个人博客网站的框架,在安装之前,我们要先在Coding上创立一个仓库
-
接下来就是安装Hexo,首先在D盘建立一个文件夹 Blog,点开 Blog 文件夹,鼠标右键打开 Git Bush Here,输入npm命令安装Hexo:
npm install -g hexo-cli
安装完成后,输入
hexo init
命令初始化博客然后输入
hexo g
静态部署此时网页已经部署完成了,输入
hexo s
命令进行查看然后浏览器访问 http://localhost:4000,就可以打开新部署的网页
看完之后 Ctrl + C 可以停止运行
-
将 Hexo 部署到 Coding
找到本地创建的文件夹的
_config.xml
文件# Deployment #你的仓库地址 deploy: type: git repository: #你的仓库地址 coding: https://e.coding.net/lishisen/lishisen/lss-blog.git branch: master
然后回到 Blog 文件夹中,打开 Git Bash,安装Git部署插件,输入命令:
npm install hexo-deployer-git --save
然后分别输入以下三条命令:
hexo clean #清除缓存文件 db.json 和已生成的静态文件 public hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写) hexo d #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)
然后在 Coding 网页中就可以通过给定的域名进行访问了,不过分配的域名非常的长,不容易记忆,所以我从阿里云注册了一个新的域名,然后自定义域名就可以了。
6. 自定义域名
在 Coding 的网站托管中新建网站
然后自定义域名
设置阿里云后台的地址解析与这里一致,然后就可以进行访问了。
7. 设置 next 主题
至此博客已经搭建好了,不过没有主题,没有任何设置只是一个框架,所以在这里使用 next 主题进行美化
更换主题:
首先需要下载主题
打开博客根目录Blog文件夹,右键Git Bash,输入如下代码将next主题下载到目录Blog/themes:
执行命令:git clone https://github.com/theme-next/hexo-theme-next themes/next
打开根目录下的 _config.yml(称为站点配置文件)
# Site
title: 记录园
subtitle: '小李的个人博客'
description: '实践出真知'
keywords:
author: 小李
language: zh-CN
timezone: Asia/Shanghai
# Extensions
theme: next
在 根目录/themes/next/_config.yml(称为主题配置文件),修改 next 主题的4个样式
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
回到根目录打开Git Bash,输入如下三条命令:
hexo clean
hexo g
hexo d
完成后使用自定义的域名就可以访问了。
8. 主题优化
8.1 设置菜单
打开主题配置文件(根目录/themes/next/_config.yml),找到 menu,将前面 # 删除就可以
menu:
home: / || fa fa-home #首页
categories: /categories/ || fa fa-th #分类
tags: /tags/ || fa fa-tags #标签
archives: /archives/ || fa fa-archive #归档
#resources: /resources/ || download fa fa-battery-full #资源
about: /about/ || fa fa-user #关于
#schedule: /schedule/ || fa fa-calendar #日历
#sitemap: /sitemap.xml || fa fa-sitemap #站点地图,供搜索引擎爬取
#commonweal: /404/ || fa fa-heartbeat #腾讯公益 404
|| 前面的时目标链接,后面的是图标名称,next 使用的图标库是:http://www.fontawesome.com.cn/faicons/#web-application
在根目录下打开 Git Bash,执行代码hexo new page "..."
即创建新的页面,然后只需要修改 index.md 文件即可
8.2 设置建站时间
进入主题配置文件(根目录/themes/next)的_config.yml,找到 since:
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2021 #建站时间
# 2021-08-01
8.3 设置头像
进入主题配置文件(根目录/themes/next)的_config.yml,找到 avatar:
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: https://img2.baidu.com/it/u=325567737,3478266281&fm=26&fmt=auto&gp=0.jpg
#/images/avatar.gif
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true
然后将你想要的头像图片复制到 themes/next/source/images 里面,重命名为 avatar.png
8.4 网站图标设置
进入主题配置文件(根目录/themes/next)的_config.yml,找到 favicon:
favicon:
small: https://demosc.chinaz.net/Files/pic/icons/8166/b9.png
#/images/favicon-16x16-next.png
medium: https://demosc.chinaz.net/Files/pic/icons/8166/b9.png
#/images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
8.5 设置动态背景
使用 JavaScript 3D library 风格
在 根目录/themes/next 目录下打开 Git Bash,执行命令
git clone https://github.com/theme-next/theme-next-three source/lib/three
打开主题配置文件即themes/next下的_config.yml,找到three,这里有三种风格,可以试一下看看喜欢哪种风格,直接将false改为true就行了,我已经选了canvas-nest,就没有选这种风格:
# JavaScript 3D library 风格.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: false
three_waves: false
canvas_lines: false
canvas_sphere: false
8.6 设置背景图片
进入主题配置文件(根目录/themes/next)的_config.yml,将 style: source/_data/styles.styl 取消注释:
custom_file_path: style:
source/_data/styles.styl
打开根目录Blog/source创建文件_data/styles.styl,添加以下内容:
// 添加背景图片
body {
background: url(/images/background.png);//自己喜欢的图片地址
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
8.7 添加顶部加载条
在 themes/next 目录下打开 Git Bash,输入命令:
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
打开主题配置文件即themes/next下的_config.yml,找到pace,将enable:false改为true,你还可以选择类型(theme):
# 顶部加载条
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal
8.8 设置预览摘要
在这里我的是没有设置,在写文章的时候加上 description 就可以实现有预览内容了
8.9 侧边栏推荐阅读
打开主题配置文件即themes/next 下的_config.yml,找到 links(里面写自定义的链接):
links_settings:
icon: fa fa-link
title: Links
# Available values: block | inline
layout: block
links:
#Title: http://yoursite.com
8.10 添加社交链接
在主题配置文件即themes/next下的_config.yml,找到 social:
# 社交链接
social:
GitHub: https://github.com/lishisen-code || fab fa-github
CSDN: https://blog.csdn.net/m0_46219348?spm=1001.2100.3001.5343 || fa fa-comment
“||”前面的是链接,后面的是 FontAwesome图标名称。
8.11 设置博文内链接为蓝色
找到 themes\next\source\css_common\components\post\post.styl
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
将上面代码复制到最后
8.12 显示文章字数和阅读时长
到根目录 blog 打开 Git Bash,执行下面的命令安装插件:
npm install hexo-wordcount --save
然后打开站点配置文件,在文件末尾加上以下代码
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 2
wpm: 275
8.13 设置文章末尾“本文结束”标记
在 themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下代码:
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:24px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
然后打开 themes/next/layout/_macro/post.swig 文件,在 post-footer 前添加以下代码:
{#####################}
{### END POST BODY ###}
{#####################}
{% if not is_index and theme.passage_end_tag.enabled %}
<div>
{% include 'passage-end-tag.swig' %}
</div>
{% endif %}
然后打开主题配置文件,在末尾添加:
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
8.14 文章末尾添加版权说明
在主题配置文件 themes/next/_config.yml 中的 creative_commons:
# 版权说明
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language:
8.15 添加访问量统计
在主题配置文件即 themes/next 下的_config.yml,找到 busuanzi_count,改为true
# 访问量统计
busuanzi_count:
enable: true
打开 /themes/next/layout/_partials/footer.swig,在最后添加如下内容
{% if theme.busuanzi_count.enable %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
<span class="post-meta-divider">|</span>
不蒜子计数初始值纠正
$(document).ready(function() {
var int = setInterval(fixCount, 50); // 50ms周期检测函数
var countOffset = 20000; // 初始化首次数据
function fixCount() {
if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
{
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset);
clearInterval(int);
}
if ($("#busuanzi_container_site_pv").css("display") != "none")
{
$("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据
clearInterval(int); // 停止检测
}
}
});
<span id="busuanzi_container_site_uv">
本站访问次数:<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
</span>
{% endif %}
8.16 添加评论功能
-
注册安装
我采用的是来必力,具体过程很简单,打开官网:Welcome to LiveRe.com
注册账号:
然后发送邮箱验证码,输入验证码验证,完成注册后点击上方安装:
选择免费的现在安装,会弹出一个框让你填网站的信息:
然后获取代码:
将 data-uid 后的代码复制,然后打开主题配置文件 _config.yml,找到 livere_uid ,将代码复制到气候即可:
livere_uid: "你的代码"
-
设置提醒
当有新评论出现时,通过邮箱提醒,点击右上角->管理页面->评论提醒:
8. 17 添加 Fork me on Github
选择你喜欢的类型,打开小猫或者字,复制代码添加到themes/next/layout/_layout.swig文件中,放在
后面:<div class="headband"></div>
<a href="https://github.com/fengye97" class="github-corner" aria-label="View source on GitHub"></a>
8.18 本地搜索
打开 cmd 安装插件:
npm install hexo-generator-search
查找主题配置文件themes/next/_config.yml中的local_search :
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
8.19 添加打赏
next(v7.7.1)已经有打赏功能,只要准备好微信和支付宝二维码,具体操作:制作微信二维码收款,很简单我就不详细说了。
打开主题配置文件,找到 reward:
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
comment: 原创技术分享,您的支持将鼓励我继续创作
reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png
将制作好的二维码图片放入themes/next/source/images文件里,并命名为wechatpay.png和alipay.png。
8. 20 图片放大关闭
打开主题配置文件_config.yml,搜索fancybox,设置其值为true:
fancybox: true
进入到 themes/next 文件下,打开 Git Bash,输入以下代码:
git clone theme-next/theme-next-fancybox3 source/lib/fancybox
9. 图床设定
在使用过程中图片的处理是很麻烦的,所以需要搭建自己的图床进行存储。
地址1(CSDN):https://blog.csdn.net/m0_46219348/article/details/119532085?spm=1001.2014.3001.5501
地址2(我的博客):http://lss-coding.top/2021/08/09/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/Gitee-picGo%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA/