mac下搭建码云gitee+hexo博客

有空就看新闻 發表於 2019-6-1 16:50:00

之前自己做了很多笔记，但都是在私有云笔记，有些经典，有些凌乱，独乐乐不如众乐乐，想了想，还是做个博客吧，复习整理的过程中，希望有缘人有所收获~
个人静态博客，其实用不到专门买服务器，用个好点的模板，搜索、图床、统计访客、评论等功能都一应俱全，且搭建方便。
网上搭建方式纷繁复杂，各式各样，该文总结了一下，只保留精华，和容易出错的细节，并在最后记录参考链接。
总体思路就是用gitee（码云）来做存储（文章和图片），不用github是个人觉得在国内访问码云更快。自动生成和部署利用的是hexo框架。
前置需要装Git、Node.js，这个在mac下直接用brew即可。
正文首先介绍如何初次创建和访问到自己的gitee域名下的个人博客测试页面。
然后讲解如何用hexo部署一个默认的模板，并生成、发布、展现成功。
剩下的就是讲解如何使用一个不错的模板。
目前评论功能还没摸索过，等有空测试成功后，会再记录一篇。
<h1 id="在码云创建好同名仓库并新增indexhtml测试">在码云创建好同名仓库，并新增index.html测试</h1>
如果你想你的 pages 首页访问地址不带二级目录，如ipvb.gitee.io，你需要建立一个与自己个性地址同名的仓库，如 https://gitee.com/ipvb 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后，就可以以 https://ipvb.gitee.io 进行访问了。
创建好后，新增index.html
选择服务-》Gitee Pages
<h1 id="安装hexo部署主题">安装hexo，部署主题</h1>
安装hexo客户端
<pre><code>npm install -g hexo-cli
</code></pre>
用hexo部署目录
<pre><code>hexo init myblog
cd myblog
npm install
</code></pre>
本地看效果
<pre><code>hexo server
</code></pre>
访问<code>http://localhost:4000</code>
先安装部署模块：
<pre><code>npm install hexo-deployer-git --save
</code></pre>
修改<code>_config.yml</code>
<pre><code>url: https://veyronc.gitee.io/
root: /
deploy:
type: git
repo: https://gitee.com/veyronc/veyronc.git
branch: master
</code></pre>
注意配置冒号后面有个空格。
清理生成部署
<pre><code>hexo clean
hexo generate
hexo deploy
</code></pre>
<code>hexo deploy</code>即将代码传到码云刚才建的新项目上。第一次执行会让输入码云的用户名和密码。
上传完成后，需要在码云的服务-》Gitee Pages，里面再次点击更新。
默认主题可能加载慢，介绍的目的是为了熟悉hexo和发布更新的操作，实际用下面的主题更好看。前面生成的文件夹删了也没关系。
<h1 id="换主题">换主题</h1>
主题可以到 https://hexo.io/themes/ 去选择，博主选的是aircloud。
https://github.com/aircloud/hexo-aircloud-blog
不在刚才的目录下操作了。重新找个地方。
<pre><code>git clone https://github.com/aircloud/hexo-aircloud-blog.git --recursive
cd hexo-aircloud-blog
npm install
hexo serve
</code></pre>
如上一章修改<code>_config.yml</code>
<pre><code>url: https://veyronc.gitee.io/
root: /
deploy:
type: git
repo: https://gitee.com/veyronc/veyronc.git
branch: master
</code></pre>
清理、生成、部署
<pre><code>hexo clean
hexo generate
hexo deploy
</code></pre>
或者您可执行下列的其中一个命令，让 Hexo 在生成完毕后自动部署网站，两个命令的作用是相同的。
<pre><code>hexo generate --deploy
hexo deploy --generate
</code></pre>
可简写为
<pre><code>hexo g -d
hexo d -g
</code></pre>
每次deploy变更完后，想要在访问<code>https://veyronc.gitee.io/</code>的时候看到效果，都需要在码云的服务-》Gitee Pages，里面再次点击更新。
<h1 id="添加和删除文章">添加和删除文章</h1>
添加文章<code>hexo new '文章新建测试'</code>会看到
<pre><code>INFOCreated: ……/hexo-aircloud-blog/source/_posts/文章新建测试.md
</code></pre>
然后去修改之。标签可以多个。
<pre><code>---
title: 文章新建测试
date: 2019-03-21 01:03:47
tags:
- 标签1
- 标签2
---
</code></pre>
删除文章需要删除的是目录<code>hexo-aircloud-blog/source/_posts</code>里的文章
执行完后还是生成、部署、最后记得在gitee更新Pages服务。
<code>hexo clean</code>操作官方说明是：
<blockquote>
Cleans the cache file (db.json) and generated files (public).
</blockquote>
测试发现，如果不执行该命令，删除了<code>source/_posts</code>里的文章，访问页面也看不到了，只不过还会存在gitee的<code>public</code>文件夹中。
<h1 id="文章中使用图片">文章中使用图片</h1>
图片也可以利用gitee存储，就放在<code>hexo-aircloud-blog/source/img</code>
md文件中载入用 <code>![](/img/kds.jpg)</code>
<h1 id="注意博客源代码和生成代码分开存储">注意：博客源代码和生成代码分开存储</h1>
上面介绍的一系列操作，是将博客生成代码传到码云的发布代码仓库。另外，设想一下如果你的本地电脑崩了怎么办，下次配置生成是不是很麻烦，所以，整个hexo-aircloud-blog文件夹，也新建一个代码仓库存起来，存成私有仓库即可。
『博客源代码』： Hexo的源码，包括themes目录（博客模板），source目录(使用MarkDown写的博客)等
『博客生成代码』：执行hexo generate或者hexo server命令生成的代码，是Hexo自动生成的，再public目录。
博主用的方法应该是比较方便的，新建一个私有仓库 blog-source，克隆下来后，把前面的博客生成代码目录里面所以文件拷过来。
则在 blog-source 根目录下 git 操作相当于传到博客源代码私有仓库blog-source。
用 hexo 命令操作的是上传到博客生成代码仓库。
<h1 id="参考">参考</h1>
https://gitee.com/help/articles/4136#article-header1
https://github.com/aircloud/hexo-theme-aircloud
https://blog.csdn.net/adobeid/article/details/81259381#giteement
https://wudong.tech/2018/08/29/Hexo接入码云评论系统/
https://blog.csdn.net/qq_34461514/article/details/79733669
https://hexo.io/docs/commands
https://hexo.io/zh-cn/docs/deployment
https://segmentfault.com/q/1010000008049369/a-1020000008049754 
来源：https://www.cnblogs.com/xrszff/p/10960147.html

頁: [1]

琼殿技术论坛's Archiver

mac下搭建码云gitee+hexo博客