Hexo博客搭建（含美化）

博主：咳咳怪
发布时间：2022 年 04 月 24 日
701 次浏览
暂无评论
6379字数
分类：教程

Hexo博客搭建教程（包括上传到GitHub和博客美化）

需要的工具

node.js
git

安装and部署

安装node.js和git
node.js
git
安装hexo
npm install hexo -g
安装后使用hexo -v查看hexo是否安装完成
创建hexo项目文件夹作为博客的目录
创建完成后在该目录使用cmd命令hexo init初始化博客
使用hexo generate或hexo g生成当前的博客
使用hexo server或hexo s启动服务器
可以用localhost:4000访问博客（此时博客是在本地运行）
生成ssh密钥
打开Git Bash，使用以下命令配置git，（推荐在博客目录下）
git config --global user.name "你的github用户的名字"
git config --global user.name "你的github用户的邮箱"
ssh-keygen -t rsa -C "你的github账户邮箱"
连续三次回车
eval "$(ssh-agent -s)",添加到ssh-agent
ssh-add ~/.ssh/id_rsa,添加生成的SSH密钥到ssh-agen
cat ~/.ssh/id_rsa.pub
复制此时显示的内容，内容应该是ssh-rsa简介
Ctrl+C退出后，在GitHub上新建一个新的仓库，仓库名为(你的用户名.github.io)
然后到仓库页面上有个setting点击后进入页面
页面的左侧的选项卡，部署选择添加部署键，添加密钥。
修改hexo配置文件
打开本地博客的根目录，找到_config.yml文件
在文件的开头处，第二部分，URL部分改成如下内容：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://(你的用户名).github.io/ (后面如果需要域名访问改成你的域名)
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

在文件的结尾处，改成如下内容：

deploy:
  type: 'git'
  repo: 'https://github.com/(你的用户名)/(你的用户名).github.io.git'
  branch: main

使用hexo clean清除扫描
使用hexo g生成博客
使用npm install hexo-deployer-git --save安装插件
使用hexo deploy或hexo d将部署到GitHub上，打开你的GitHub Pages设置进入输入的url，就可以的博客了。以上两步也可以连写为hexo d -g。

博客美化（本文使用Fluid主题）

安装主题

Fluid 是基于 Hexo 的一款 Material Design 风格的主题

TIP
致主题的新用户：

本指南经过数个版本打磨，绝大部分的功能都有详细说明，请仔细阅读，节约自己和他人的时间；

本指南中提到的："博客配置" 指的 Hexo 博客目录下的 _config.yml，"主题配置" 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，注意区分；

本指南中提到的 source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录；

每次无论 hexo g 或 hexo s，都最好先使用 hexo clean 清除本地缓存；

页面结果以本地 hexo s 为准，部署后的异常大部分是线上缓存原因，在确认没有报错的情况下，等待若干时间后即可正常；

由于主题的不同版本会存在配置差异，本指南以最新版本为准。

方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：
npm install --save hexo-theme-fluid
然后在博客目录下创建_config.fluid.yml，将主题的_config.yml
内容复制过去。

方式二

下载最新release版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建关于页

在git-bash或cmd里执行命令
hexo new page about
创建成功后修改 /source/about/index.md，添加 layout 属性。
修改后的文件示例如下：

---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

WARNING
layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

关于更多

可以看Fluid主题使用手册

添加网站运行时间

注意缩进

content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div>
        <span id="timeDate">载入天数...</span>
        <span id="times">载入时分秒...</span>
        <script src="/js/duration.js"></script>
    </div>
'

JS文件

如果是npm安装则在博客目录下 blog/node_modules/hexo-theme-fluid/source创建 duration.js

var now = new Date();

function createtime() {
    var grt = new Date("08/30/2021 20:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length == 1) {
        snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站已安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}

setInterval("createtime()", 250);

添加访客量

主题配置文件大概431行（展示网站的 PV、UV 统计数）
enable: true
source: "busuanzi"
leancloud需要注册且设置（busuanzi不用）

使用所购买的域名访问博客

GitHub Pages 可使用两种类型的域名：子域名和 apex 域名。有关不支持的自定义域名列表

支持的自定义域类型   示例

www 子域      www.example.com  
自定义子域       blog.example.com
Apex 域              example.com

管理 GitHub Pages 站点的自定义域
在主题目录下 source下创建一个文件CNAME 该文件无后辍，内容为你所解析的域名内容
例如：我的是yorg.top 文件内就写 yorg.top

配置评论

主题文件搜索Comment plugin打开评论插件类型选waline
配置waline

waline

serverURLs: '(填写你的站点)' 
emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili']

本文参考：

在GitHub上部署hexo博客【作者：codeanime】
在github上部署hexo【作者：戴维汉姆】
Hexo + Fluid 美化【作者：EmoryHuang】
Hexo Fluid 用户手册

版权属于：咳咳怪
本文链接：https://yorg.top/13.html
转载时须注明出处

最后修改：2024 年 02 月 18 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Hexo博客搭建（含美化）

咳咳怪 • 2022 年 04 月 24 日

<h1>Hexo博客搭建教程（包括上传到GitHub和博客美化）</h1>
<h2>需要的工具</h2>
<ul>
<li>node.js</li>
<li>git</li>
</ul>
<h2>安装and部署</h2>
<ol>
<li>
<p>安装node.js和git<br />
<span class="external-link"><a class="no-external-link" href="https://nodejs.org/zh-cn/" target="_blank"><i data-feather="external-link"></i>node.js</a></span><br />
<span class="external-link"><a class="no-external-link" href="https://git-scm.com/downloads" target="_blank"><i data-feather="external-link"></i>git</a></span></p>
</li>
<li>
<p>安装hexo<br />
<code>npm install hexo -g</code><br />
安装后使用<code>hexo -v</code>查看hexo是否安装完成</p>
</li>
<li>
<p>创建hexo项目文件夹作为博客的目录<br />
创建完成后在该目录使用cmd命令<code>hexo init</code>初始化博客</p>
</li>
<li>
<p>使用<code>hexo generate</code>或<code>hexo g</code>生成当前的博客</p>
</li>
<li>
<p>使用<code>hexo server</code>或<code>hexo s</code>启动服务器<br />
可以用<code>localhost:4000</code>访问博客（此时博客是在本地运行）</p>
</li>
<li>
<p>生成ssh密钥<br />
打开Git Bash，使用以下命令配置git，（推荐在博客目录下）<br />
<code>git config --global user.name "你的github用户的名字"</code><br />
<code>git config --global user.name "你的github用户的邮箱"</code><br />
<code>ssh-keygen -t rsa -C "你的github账户邮箱"</code><br />
连续三次回车<br />
<code>eval "$(ssh-agent -s)"</code>,添加到ssh-agent<br />
<code>ssh-add ~/.ssh/id_rsa</code>,添加生成的SSH密钥到ssh-agen<br />
<code>cat ~/.ssh/id_rsa.pub</code><br />
复制此时显示的内容，内容应该是ssh-rsa简介</p>
</li>
<li>
<p>Ctrl+C退出后，在GitHub上新建一个新的仓库，仓库名为(你的用户名.github.io)<br />
然后到仓库页面上有个setting点击后进入页面<br />
页面的左侧的选项卡，部署选择添加部署键，添加密钥。</p>
</li>
<li>
<p>修改hexo配置文件<br />
打开本地博客的根目录，找到_config.yml文件<br />
在文件的开头处，第二部分，URL部分改成如下内容：</p>
</li>
</ol>
<pre><code># URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://(你的用户名).github.io/ (后面如果需要域名访问改成你的域名)
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks</code></pre>
<p>在文件的结尾处，改成如下内容：</p>
<pre><code>deploy:
  type: 'git'
  repo: 'https://github.com/(你的用户名)/(你的用户名).github.io.git'
  branch: main</code></pre>
<ol start="9">
<li>使用<code>hexo clean</code>清除扫描</li>
<li>使用<code>hexo g</code>生成博客</li>
<li>使用<code>npm install hexo-deployer-git --save</code>安装插件</li>
<li>使用<code>hexo deploy</code>或<code>hexo d</code>将部署到GitHub上，打开你的GitHub Pages设置进入输入的url，就可以的博客了。以上两步也可以连写为<code>hexo d -g</code>。</li>
</ol>
<h2>博客美化（本文使用Fluid主题）</h2>
<h2>安装主题</h2>
<p>Fluid 是基于 Hexo 的一款 Material Design 风格的主题</p>
<blockquote>
<p>TIP<br />
致主题的新用户：</p>
<p>本指南经过数个版本打磨，绝大部分的功能都有详细说明，请仔细阅读，节约自己和他人的时间；</p>
<p>本指南中提到的："博客配置" 指的 Hexo 博客目录下的 _config.yml，"主题配置" 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，注意区分；</p>
<p>本指南中提到的 source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录；</p>
<p>每次无论 <code>hexo g</code> 或 <code>hexo s</code>，都最好先使用 <code>hexo clean</code> 清除本地缓存；</p>
<p>页面结果以本地 <code>hexo s</code> 为准，部署后的异常大部分是线上缓存原因，在确认没有报错的情况下，等待若干时间后即可正常；</p>
<p>由于主题的不同版本会存在配置差异，本指南以最新版本为准。</p>
</blockquote>
<h3>方式一</h3>
<p>Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：<br />
<code>npm install --save hexo-theme-fluid</code><br />
然后在博客目录下创建<code>_config.fluid.yml</code>，将主题的<span class="external-link"><a class="no-external-link" href="https://github.com/fluid-dev/hexo-theme-fluid/blob/master/_config.yml" target="_blank"><i data-feather="external-link"></i>_config.yml</a></span><br />
内容复制过去。</p>
<h3>方式二</h3>
<p>下载<span class="external-link"><a class="no-external-link" href="https://github.com/fluid-dev/hexo-theme-fluid/releases" target="_blank"><i data-feather="external-link"></i>最新release版本</a></span>解压到 themes 目录，并将解压出的文件夹重命名为 fluid。</p>
<h2>指定主题</h2>
<p>如下修改 Hexo 博客目录中的 <code>_config.yml</code>：</p>
<pre><code>theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改</code></pre>
<h2>创建关于页</h2>
<p>在git-bash或cmd里执行命令<br />
<code>hexo new page about</code><br />
创建成功后修改 <code>/source/about/index.md</code>，添加 <code>layout</code> 属性。<br />
修改后的文件示例如下：</p>
<pre><code>---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML</code></pre>
<blockquote>
<p>WARNING<br />
<code>layout: about</code> 必须存在，并且不能修改成其他值，否则不会显示头像等样式。</p>
</blockquote>
<h3>关于更多</h3>
<p>可以看<span class="external-link"><a class="no-external-link" href="https://hexo.fluid-dev.com/docs/start/" target="_blank"><i data-feather="external-link"></i>Fluid主题使用手册</a></span></p>
<h2>添加网站运行时间</h2>
<p>注意缩进</p>
<pre><code>content: '
    &lt;a href="https://hexo.io" target="_blank" rel="nofollow noopener"&gt;&lt;span&gt;Hexo&lt;/span&gt;&lt;/a&gt;
    &lt;i class="iconfont icon-love"&gt;&lt;/i&gt;
    &lt;a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"&gt;&lt;span&gt;Fluid&lt;/span&gt;&lt;/a&gt;
    &lt;div&gt;
        &lt;span id="timeDate"&gt;载入天数...&lt;/span&gt;
        &lt;span id="times"&gt;载入时分秒...&lt;/span&gt;
        &lt;script src="/js/duration.js"&gt;&lt;/script&gt;
    &lt;/div&gt;
'</code></pre>
<h4>JS文件</h4>
<p>如果是npm安装则在 博客目录下 <code>blog/node_modules/hexo-theme-fluid/source</code>创建 <code>duration.js</code></p>
<pre><code class="language-js">var now = new Date();

setInterval("createtime()", 250);</code></pre>
<h2>添加访客量</h2>
<p>主题配置文件 大概431行（展示网站的 PV、UV 统计数）<br />
<code>enable: true</code><br />
<code>source: "busuanzi"</code><br />
leancloud需要注册且设置（busuanzi不用）</p>
<h4>更多样式（在主题配置下</h4>
<p>custom_js:</p>
<pre><code>custom_js:
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js # 动态黑色线条
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心</code></pre>
<p>启用某个就把注释删除掉<br />
custom_css:</p>
<pre><code>#  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针
#  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色</code></pre>
<h2>使用所购买的域名访问博客</h2>
<p>GitHub Pages 可使用两种类型的域名：子域名和 apex 域名。 有关不支持的自定义域名列表</p>
<pre><code>支持的自定义域类型   示例

www 子域      www.example.com  
自定义子域       blog.example.com
Apex 域              example.com</code></pre>
<p><span class="external-link"><a class="no-external-link" href="https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain" target="_blank"><i data-feather="external-link"></i>管理 GitHub Pages 站点的自定义域</a></span><br />
在主题目录下 source下创建一个文件CNAME 该文件无后辍，内容为你所解析的域名内容<br />
例如：我的是yorg.top 文件内就写 yorg.top</p>
<h2>配置评论</h2>
<p>主题文件搜索<code>Comment plugin</code>打开评论插件 类型选waline<br />
配置waline</p>
<p><span class="external-link"><a class="no-external-link" href="https://waline.js.org/" target="_blank"><i data-feather="external-link"></i>waline</a></span></p>
<pre><code>serverURLs: '(填写你的站点)' 
emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili']</code></pre>
<h2>本文参考：</h2>
<p><span class="external-link"><a class="no-external-link" href="https://codeanime.cc/%E5%9C%A8GitHub%E4%B8%8A%E9%83%A8%E7%BD%B2hexo%E5%8D%9A%E5%AE%A2.html" target="_blank"><i data-feather="external-link"></i>在GitHub上部署hexo博客</a></span>【作者：codeanime】<br />
<span class="external-link"><a class="no-external-link" href="https://davidham3.github.io/blog/2018/02/20/%E5%9C%A8github%E4%B8%8A%E9%83%A8%E7%BD%B2hexo/" target="_blank"><i data-feather="external-link"></i>在github上部署hexo</a></span>【作者：戴维汉姆】<br />
<span class="external-link"><a class="no-external-link" href="https://emoryhuang.cn/blog/1729600336.html" target="_blank"><i data-feather="external-link"></i>Hexo + Fluid 美化</a></span>  【作者：EmoryHuang】<br />
<span class="external-link"><a class="no-external-link" href="https://hexo.fluid-dev.com/docs/guide/" target="_blank"><i data-feather="external-link"></i>Hexo Fluid 用户手册</a></span>  </p><hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：咳咳怪</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://yorg.top/13.html">https://yorg.top/13.html</a></p><p class="content-copyright">转载时须注明出处</p></blockquote>

Hexo博客搭建（含美化）

Hexo博客搭建教程（包括上传到GitHub和博客美化）

需要的工具

安装and部署

博客美化（本文使用Fluid主题）

安装主题

方式一

方式二

指定主题

创建关于页

关于更多

添加网站运行时间

JS文件

添加访客量

更多样式（在主题配置下

使用所购买的域名访问博客

配置评论

本文参考：

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

土耳其电子钱包入金教程

搭建Book-searcher（Zlib-searcher）

Cloudflare搭建DDNS教程

通过Origin Rules使CloudFlare CDN回源以使用任意的端口（NAT套CF教程）

Markdown（笔记）

（VPS）利用Aria2下载Rclone转存到OneDrive

土耳其电子钱包入金教程

NAT-Nyanpass单端隧道使用

Cloudflare搭建DDNS教程

通过Origin Rules使CloudFlare CDN回源以使用任意的端口（NAT套CF教程）

Hexo博客搭建（含美化）

Hexo博客搭建教程（包括上传到GitHub和博客美化）

需要的工具

安装and部署

博客美化（本文使用Fluid主题）

安装主题

方式一

方式二

指定主题

创建关于页

关于更多

添加网站运行时间

JS文件

添加访客量

更多样式（在主题配置下

使用所购买的域名访问博客

配置评论

本文参考：

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Hexo博客搭建（含美化）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款