感恩天地君亲师 發表於 2020-7-6 11:57:00

Gitee Pages搭建博客

<h1 id="安装volta及nodejs">安装Volta及NodeJS</h1>
<p>参见文章NodeJS使用volta进行版本管理</p>
<h1 id="安装hexo">安装hexo</h1>
<pre><code>参见hexo官方文档进行安装：https://hexo.io/zh-cn/docs/
其中提供了两种安装hexo的方式，一种为全局安装，一种为局部安装
</code></pre>
<ul>
<li>
<p>全局安装<br>
执行<code>npm install -g hexo-cli</code><br>
因为采用了volta进行nodejs进行版本管理，所以执行上述命令报<br>
<img src="https://img2020.cnblogs.com/blog/691425/202007/691425-20200706095615390-174951495.png" alt="" loading="lazy"></p>
<p>执行<code>volta run --npm install -g hexo-cli</code>，报<br>
<img src="https://img2020.cnblogs.com/blog/691425/202007/691425-20200706100107668-214512434.png" alt="" loading="lazy"></p>
<p>执行<code>volta install hexo-cli</code><br>
<img src="https://img2020.cnblogs.com/blog/691425/202007/691425-20200706100222019-989360229.png" alt="" loading="lazy"></p>
</li>
<li>
<p>局部安装<br>
局部安装有两种方式</p>
<ol>
<li>找一个目录新建一个临时文件夹，在该目录局部安装hexo，比如<code>D:\workspace\nodejs\temp</code></li>
</ol>
<pre><code>cd D:\\workspace\\nodejs\\temp
npm install hexo
npx hexo init D:\\workspace\\nodejs\\fortuneju-blog-hexo
</code></pre>
<p>此时便可在fortuneju-blog-hexo目录初始化hexo文件及结构<br>
以后如若执行hexo的命令，先进入到D:\workspace\nodejs\temp目录下进行操作</p>
<ol start="2">
<li>在<code>D:\\workspace\\nodejs\\fortuneju-blog-hexo</code> 目录直接执行<code>npx hexo init</code></li>
</ol>
<p>两种局部安装方式类似，只不过第一种方式是将hexo安装到指定目录，每次到该目录执行<code>npx hexo &lt;cmd&gt;</code> 都是读取的该目录下局部安装的hexo；<br>
而第二种方式直接执行<code>npx hexo &lt;cmd&gt;</code>是每次都会在配置的node_cache目录中临时安装npx，hexo，每次执行完命令就会清空cache，所以每执行一次npx hexo命令就会下载一次npx hexo，所以会比较费时一点。</p>
</li>
</ul>
<p><strong>注意</strong></p>
<ul>
<li>无法执行<code>hexo xxx</code>命令请检查是否在环境变量-&gt;用户变量的PATH中配置了<code>%VOLTA_HOME%/bin</code>目录，具体参照上方安装Volta的文章</li>
<li><code>volta install &lt;package name&gt;</code>因网络原因安装失败，请参照上方安装Volta的文章进行解决</li>
</ul>
<h1 id="安装hexo-volantis主题">安装hexo volantis主题</h1>
<p>参见volantis官方教程 https://volantis.js.org/v2/getting-started/index.html<br>
官方文档中安装了 Hexo 搜索的依赖包和 stylus 渲染器</p>
<ul>
<li>如果要使用微信分享，则需要安装插件：<pre><code>npm i -S hexo-helper-qrcode
</code></pre>
</li>
<li>要开启RSS订阅，需要安装插件hexo-generator-feed<pre><code>npm install hexo-generator-feed
</code></pre>
在根目录的_config.yml中配置<pre><code>#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
theme_config:
rss: /atom.xml
</code></pre>
具体参考：https://www.jianshu.com/p/51cc016a1933</li>
<li>部署到git服务器，需要安装 hexo-deployer-git<pre><code>npm install hexo-deployer-git --save
</code></pre>
</li>
</ul>
<h1 id="hexo的配置和volantis主题配置">hexo的配置和volantis主题配置</h1>
<p>hexo的全局配置是在根目录下的<code>_config.yml</code>文件中，<code>/themes/volantis/_config.yml</code>文件是<code>volantis</code>主题的配置，所有主题配置的内容都可以在hexo的<code>_config.yml</code>中<code>theme_config:</code>属性下进行配置，并且会合并并且覆盖主题中的配置。<br>
所以将主题中需要修改的部分放在hexo的配置文件的<code>theme_config</code>属性下，从而可以不对主题下的所有文件进行修改。<br>
主题配置，hexo的<code>theme_config</code>配置，<code>Front-matter</code>（页面上方---分割的部分）的优先级递增，即后面的会覆盖前面的配置。这样便实现<code>theme_config</code>对所有页面的配置，<code>Front-matter</code>实现对页面的个性化配置<br>
我的hexo配置文件：https://gitee.com/youfule/youfule-blog-source/blob/master/_config.yml<br>
其中如下部分配置使用了数据文件：https://gitee.com/youfule/youfule-blog-source/tree/master/source/_data</p>
<p>因为<code>scaffolds</code>文件夹下存放的是模板文件，在新建文章时会使用对应的模块去创建，所以我将<code>Front-matter</code>所有可配置项在<code>scaffolds</code>下的模板中进行了列出，再使用的时候可以方便的打开要配置的项。模板文件见：https://gitee.com/youfule/youfule-blog-source/tree/master/scaffolds/</p>
<h1 id="其他">其他</h1>
<p>可参考 https://melodyjerry.gitee.io/ 上的一些插件<br>
参考文档 https://www.jianshu.com/p/26a726baf70e</p><br><br>
来源：https://www.cnblogs.com/fortuneju/p/13254087.html
頁: [1]
查看完整版本: Gitee Pages搭建博客