搭建gitee page真的很多坑

只为唯一 發表於 2022-5-6 13:15:00

<pre class="md-meta-block md-end-block"></pre>
所有操作先建一个空白文件夹名字随意
<blockquote>
主要记录自己安装的过程并不详细
</blockquote>
<h2 class="md-end-block md-heading">安装git</h2>
略
<h2 class="md-end-block md-heading">配置 Git 参数</h2>
过程跟上篇文章一样，已经做过的步骤不用再重复，直接到复制公钥那一步。
在博客根目录下，右键，打开Git Bash Here。
配置用户名和邮箱，这两个参数用于 Git 提交时的身份识别。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">COPY# 其中 username 和 username@XXX.com 是你注册 Gitee 的用户名和邮箱，如果账号不是邮箱注册的话，填自己的一个邮箱地址就行了 git config --global user.name "username" git config --global user.email "username@XXX.com"</pre>
生成 SSH keys，主要用于Git 提交时的权限控制和加密，本地根据 RSA 算法生成公私密钥对，然后将公钥添加到 Gitee 上，本机就可以提交代码到自己的 GitHub 库了。这个是根据当前使用的电脑的一些信息生成的，所以换电脑提交时要重新生成并添加。
输入下面命令，然后一直按回车，直到结束。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">COPY# 其中 username@XXX.com 同上，是你的注册邮箱 ssh-keygen -t rsa -C "username@XXX.com"</pre>
<img src="https://img2022.cnblogs.com/blog/2557036/202205/2557036-20220506131413955-2001416178.png" alt="image-20201229233801498">
输入下面的命令，查看公钥内容，应该是一个<code>ssh-rsa</code>开头，以<code>你的邮箱</code>结尾的长字符串。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">COPY# cat后面的路径就是上图中的公钥文件路径，直接复制过来就可以。其中XXX是你的电脑用户名。 cat /c/Users/XXX/.ssh/id_rsa.pub</pre>
<img src="https://img2022.cnblogs.com/blog/2557036/202205/2557036-20220506131413816-1082642825.png" alt="image-20201229234452012">
复制公钥内容（其实在Git Bash命令行里，默认选中文字松开鼠标就会自动把选中内容复制到剪贴板，点击鼠标中键是粘贴）。
 
 
<h2 class="md-end-block md-heading">关于git秘钥</h2>
1.配置
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">git config –global user.name "xxxxx" git config –global user.email "xxx@xx.xxx" 注：查下是否配置成功，用命令 git config --global --list</pre>
2.生成秘钥
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">ssh-keygen -t rsa -C"上面的邮箱" 注：执行上面命令后，连续回车3次</pre>
3.打印
进入ssh
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">cd ~/.ssh</pre>
打印ssh
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">cat id_rsa.pub</pre>
 
 
 
<h2 class="md-end-block md-heading">配置秘钥</h2>
一定要配置到个人主页，不是仓库
<img src="https://img2022.cnblogs.com/blog/2557036/202205/2557036-20220506131414203-308829134.png" alt="image-20211129231631074">
查看是否成功：ssh -T git@gitee.com
<h2 class="md-end-block md-heading">安装hexo</h2>
官方：Hexo
<ol class="ol-list" start="">
<li class="md-list-item">
<del>cmd管理员:（似乎多此一举）</del>
</li>
</ol>
<blockquote>
<del>
<del>npm install -g hexo-cli</del>
</blockquote>
<ol class="ol-list" start="2">
<li class="md-list-item">
进入git界面:
</li>
</ol>
<blockquote>
npm config set registry=http://registry.npm.taobao.org
npm install -g hexo-cli
#安装发布插件
npm install hexo-deployer-git 
hexo init #初始化
</blockquote>
<h2 class="md-end-block md-heading">配置_config.yml文件</h2>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">deploy: type: git repo: git@gitee.com:xxxxxx/xxxxxx.git branch: master</pre>
<h2 class="md-end-block md-heading">页面加载没有样式以及路径问题解决❗</h2>
修改配置文件,不这样改二级目录访问css,js加载不出来
<pre class="md-fences mock-cm md-end-block">url: https://xxx.gitee.io/abc root: /abc/</pre>
<h2 class="md-end-block md-heading">解决图片路径问题</h2>
本来用typro可以搭配picgo但是由于最近突然转成收费一气之下删了，新的方法：
插件hexo-renderer-marked解决了这个问题。可以只用<code>npm install hexo-renderer-marked</code>命令直接安装，之后在<code>config.yaml</code>中更改配置如下：
<pre class="md-fences mock-cm md-end-block">post_asset_folder: true #上传附件比如相关的图片 marked: prependRoot: true postAsset: true</pre>
<h2 class="md-end-block md-heading">安装主题</h2>
我用的主题插件
Butterfly - A Simple and Card UI Design theme for Hexo
npm install hexo-renderer-pug hexo-renderer-stylus --save
<h2 class="md-end-block md-heading">几个插件</h2>
<h3 class="md-end-block md-heading">安装发布插件</h3>
npm install hexo-deployer-git 
<h3 class="md-end-block md-heading">图片插件</h3>
npm install hexo-image-link --save
npm install hexo-filter-inline-assets --save
<h3 class="md-end-block md-heading">本地搜索插件</h3>
npm install --save hexo-generator-search
<h3 class="md-end-block md-heading">生成tags和分类(没用懂）</h3>
npm install hexo-enhancer --save
修改配置文件：
keywords: HTML, JavaScript, Hexo tags: Java, Golang, React, Vue
<h3 class="md-end-block md-heading">评论</h3>
参考获取api (66条消息) 为你的Hexo加上评论系统-Valine_BlueLzy的个人博客-CSDN博客_hexo 评论
具体配置 Butterfly 安裝文檔(四) 主題配置-2 | Butterfly
<h2 class="md-end-block md-heading">发布</h2>
hexo g
hexo d
<h2 class="md-end-block md-heading">安装后折腾一下布局标签之类的</h2>
<h3 class="md-end-block md-heading">标签</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
前往你的 Hexo 博客的根目錄
</li>
<li class="md-list-item">
輸入hexo new page tags
</li>
<li class="md-list-item">
你會找到source/tags/index.md這個文件
</li>
<li class="md-list-item">
修改這個文件：
</li>
</ol>
 記得添加 type: "tags"
<h3 class="md-end-block md-heading">分类</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
前往你的 Hexo 博客的根目錄
</li>
<li class="md-list-item">
輸入hexo new page categories
</li>
<li class="md-list-item">
你會找到source/categories/index.md這個文件
</li>
<li class="md-list-item">
修改這個文件：
記得添加 type: "categories"
</li>
</ol>
<h3 class="md-end-block md-heading">小图标note</h3>
Butterfly 安装文档（三）主题配置-1 | Butterfly
<img src="https://img2022.cnblogs.com/blog/2557036/202205/2557036-20220506131412851-1406360565.png" alt="image-20211130211323199">
<h3 class="md-end-block md-heading">mermaid</h3>
Butterfly 安装文档（三）主题配置-1 | Butterfly
<img src="https://img2022.cnblogs.com/blog/2557036/202205/2557036-20220506131412911-118952766.png" alt="image-20211130211511428">
<h3 class="md-end-block md-heading">laber</h3>
Butterfly 安装文档（三）主题配置-1 | Butterfly
 

</div>
<div id="MySignature" role="contentinfo">
无事生非 
来源：https://www.cnblogs.com/Hutters/p/16228342.html

頁: [1]

琼殿技术论坛's Archiver

搭建gitee page真的很多坑