Hexo博客搭建（含美化）

博主：咳咳怪
发布时间：2022 年 04 月 24 日
1603 次浏览
暂无评论
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）

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

Cloudflare搭建DDNS教程

土耳其电子钱包入金教程

Markdown（笔记）

Hexo永久化链接

《墨菲定律》（上）

《自卑与超越》

Alist搭建教程

Hexo博客搭建（含美化）

Hexo博客搭建（含美化）

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

需要的工具

安装and部署

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

安装主题

方式一

方式二

指定主题

创建关于页

关于更多

添加网站运行时间

JS文件

添加访客量

更多样式（在主题配置下

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

配置评论

本文参考：

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

Hexo博客搭建（含美化）

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