Coding+Hexo博客搭建

最新推荐文章于 2023-02-17 21:23:13 发布

小小卷王

最新推荐文章于 2023-02-17 21:23:13 发布

阅读量1.1k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46219348/article/details/119532141

版权

笔记专栏收录该内容

61 篇文章 2 订阅

订阅专栏

博主个人博客已经搭建好，可以移步访问 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"

设置环境变量：
1. 系统变量中新建变量：NODE_PATH，值为 E:\nodejs\node_global\node_modules
2. 编辑用户变量中的 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/

小小卷王

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Coding+Hexo博客搭建

博主个人博客已经搭建好，可以移步访问 http://lss-coding.top/description: 本篇文章是我使用 Coding+Hexo 的整体过程。在很早很早以前就想着做一个自己的博客系统，因为之前使用的 CS某N 感觉广告太多，别的平台没有怎么使用过，想着自己做一个按照自己想法的博客网站，2020年9月在阿里云购买了一个服务器和一个域名，那时候购买只是想着体验一下，后来2021年1月份左右有想法做一个自己的博客系统，然后第一个版本使用 Spring，SpringMVC，Myb.
复制链接

扫一扫