洋艹匆 發表於 2023-7-14 17:22:00

基于gitee+hexo搭建个人博客

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
                  </svg>
                  <h1>gitee准备</h1>
<p>注册好gitee</p>
<h2>git安装与配置</h2>
<p>下载git默认安装,配置<br> 在之前下载的目录下,右键,选择【Git Bash Here】<br> <img src="https://img-blog.csdnimg.cn/30efb3050cd34b96b8ac3e2ae8ff71c6.png" alt="在这里插入图片描述"></p>
<h3>配置用户</h3>
<pre><code class="prism language-c">git config <span class="token operator">--</span>global user<span class="token punctuation">.</span>name <span class="token string">"username"</span> <span class="token comment">//( "username" 注册的手机号码,)配置邮箱</span>
git config <span class="token operator">--</span>global user<span class="token punctuation">.</span>email <span class="token string">"username@email.com"</span> <span class="token operator">/</span> <span class="token operator">/</span><span class="token punctuation">(</span><span class="token string">"username@email.com"</span> 绑定的邮箱)
</code></pre>
<p>执行以上命令 行后 , 使用<code>git config --global --list</code> 命令查看配置是 否 成功,如 图所示:如果成功,会显示所配置的用户名和邮箱<img src="https://img-blog.csdnimg.cn/e4734c9462ef4f87b0870a47c8b31884.png" alt="在这里插入图片描述"></p>
<h3>生成SSH</h3>
<p>继续输入:</p>
<pre><code class="prism language-powershell"> ssh-keygen <span class="token operator">-</span>t rsa
</code></pre>
<p>连敲三次回车查看是否有.ssh 文件夹产生有以下两个文件:<br> <img src="https://img-blog.csdnimg.cn/b3416a14abde431d97cd72e25c0ead8b.png" alt="在这里插入图片描述"></p>
<p>将 ssh 件夹 的 公钥( id_rsa.pub)复制 到 Gitee 管理平台 ,在 Gitee 的 人 户的设置找到如下 ,如 所示:<br> 可以通过 git 命令复制文件:</p>
<pre><code class="prism language-c">clip <span class="token operator">&lt;</span> <span class="token operator">~</span><span class="token operator">/</span><span class="token punctuation">.</span>ssh<span class="token operator">/</span>id_rsa<span class="token punctuation">.</span>put
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/7d4f8baad1c042819d0b2eb43ccc5234.png" alt="在这里插入图片描述"><br> 输入密码之后,测试一下 是否 成功,在 Git Bush 命令框 继续 入以下命令,回车:</p>
<pre><code class="prism language-c">ssh <span class="token operator">-</span>T git@gitee<span class="token punctuation">.</span>com
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/a947ac35b199403199ae0b6b7f0ef45f.png" alt="在这里插入图片描述"><br> 第一次连接时, 确认并添加主机到本机 SSH 可信列表, 输入 yes 自动在.ssh 件夹内生 known_hosts 件, 即可连接成功。<br> <img src="https://img-blog.csdnimg.cn/1104383d1df04952b36fce177a194dba.png" alt="在这里插入图片描述"></p>
<h3>配置远程仓库</h3>
<p>在gitee中新建仓库<br> 新建好仓库之后再本地建一个新的空白文件夹<br> <img src="https://img-blog.csdnimg.cn/c5219b28f91d4fefb720dcbb13fea829.png" alt="在这里插入图片描述"><br> 进入当前目录下<img src="https://img-blog.csdnimg.cn/4ea98664a6b547e7ad59f1c3d82f3894.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/a3118439d0e9416c94e8bc67168d46d9.png" alt="在这里插入图片描述"><br> 始化为Git 本地仓库</p>
<p>在电脑 中新建一 空白 件夹, 使用以下命令进行初始化:</p>
<p>初始化</p>
<pre><code class="prism language-c">git init <span class="token punctuation">.</span>
</code></pre>
<p>使用命名查看本地仓库 git 是否配置过远程仓库</p>
<pre><code class="prism language-c">git remote <span class="token operator">-</span>v
</code></pre>
<p>若没有绑定,绑定远程仓库,使用以下命名:</p>
<pre><code class="prism language-c">git remote add origin 你的仓库地址<span class="token punctuation">.</span>git
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/f61b731703f44d538351ae8db4b3e06d.png" alt="在这里插入图片描述"><br> 连接提示测试:</p>
<pre><code class="prism language-c">git push <span class="token operator">-</span>u origin <span class="token string">"master"</span>
</code></pre>
<p>如果远程仓库不是空白的,会报这个错要使用命令 <code>git pull --rebase origin master</code> 将远程仓库同步到本地再连接<br> <img src="https://img-blog.csdnimg.cn/cd134c8c68af46faada50ae9032610bb.png" alt="在这里插入图片描述"><br> 连接成功,git配置就好了<br> <img src="https://img-blog.csdnimg.cn/f95274ec6d3145fd9763b4f006300cd2.png" alt="在这里插入图片描述"></p>
<h2>Git 命令总结</h2>
<h3>1、新建代码库</h3>
<pre><code class="prism language-c"># 在当前目录新建一个Git代码库
$ git init

# 新建一个目录,将其初始化为Git代码库
$ git init <span class="token punctuation">[</span>project<span class="token operator">-</span>name<span class="token punctuation">]</span>

# 下载一个项目和它的整个代码历史
$ git clone <span class="token punctuation">[</span>url<span class="token punctuation">]</span>
</code></pre>
<h3>2、配置</h3>
<pre><code class="prism language-c"># 显示当前的Git配置
$ git config <span class="token operator">--</span>list

# 编辑Git配置文件
$ git config <span class="token operator">-</span>e <span class="token punctuation">[</span><span class="token operator">--</span>global<span class="token punctuation">]</span>

# 设置提交代码时的用户信息
$ git config <span class="token punctuation">[</span><span class="token operator">--</span>global<span class="token punctuation">]</span> user<span class="token punctuation">.</span>name <span class="token string">""</span>
$ git config <span class="token punctuation">[</span><span class="token operator">--</span>global<span class="token punctuation">]</span> user<span class="token punctuation">.</span>email <span class="token string">""</span>
</code></pre>
<h3>3、增加/删除文件</h3>
<pre><code class="prism language-c"># 删除文件
$ git rm <span class="token operator">-</span>r <span class="token operator">--</span>cached 文件<span class="token operator">/</span>文件夹名称

# 删除之后直接提交到远程仓库
$ git commit <span class="token operator">-</span>m <span class="token string">"提交信息"</span>
$ git push

# 定位到 C盘
$ cd C<span class="token operator">:</span>

# 显示当前目录
$ pwd

# 添加指定文件到暂存区
$ git add <span class="token punctuation">[</span>file1<span class="token punctuation">]</span> <span class="token punctuation">[</span>file2<span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>

# 添加指定目录到暂存区,包括子目录
$ git add <span class="token punctuation">[</span>dir<span class="token punctuation">]</span>

# 添加当前目录的所有文件到暂存区
$ git add <span class="token punctuation">.</span>

# 添加每个变化前,都会要求确认
# 对于同一个文件的多处变化,可以实现分次提交
$ git add <span class="token operator">-</span>p

# 删除工作区文件,并且将这次删除放入暂存区
$ git rm <span class="token punctuation">[</span>file1<span class="token punctuation">]</span> <span class="token punctuation">[</span>file2<span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>

# 停止追踪指定文件,但该文件会保留在工作区
$ git rm <span class="token operator">--</span>cached <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 删除缓存
$ git rm <span class="token operator">-</span>r <span class="token operator">-</span>f cached <span class="token punctuation">.</span><span class="token operator">/</span>

# 改名文件,并且将这个改名放入暂存区
$ git mv <span class="token punctuation">[</span>file<span class="token operator">-</span>original<span class="token punctuation">]</span> <span class="token punctuation">[</span>file<span class="token operator">-</span>renamed<span class="token punctuation">]</span>
</code></pre>
<h3>4、代码提交</h3>
<pre><code class="prism language-c"># 提交暂存区到仓库区
$ git commit <span class="token operator">-</span>m <span class="token punctuation">[</span>message<span class="token punctuation">]</span>

# 提交暂存区的指定文件到仓库区
$ git commit <span class="token punctuation">[</span>file1<span class="token punctuation">]</span> <span class="token punctuation">[</span>file2<span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator">-</span>m <span class="token punctuation">[</span>message<span class="token punctuation">]</span>

# 提交工作区自上次commit之后的变化,直接到仓库区
$ git commit <span class="token operator">-</span>a

# 提交时显示所有diff信息
$ git commit <span class="token operator">-</span>v

# 使用一次新的commit,替代上一次提交
# 如果代码没有任何新变化,则用来改写上一次commit的提交信息
$ git commit <span class="token operator">--</span>amend <span class="token operator">-</span>m <span class="token punctuation">[</span>message<span class="token punctuation">]</span>

# 重做上一次commit,并包括指定文件的新变化
$ git commit <span class="token operator">--</span>amend <span class="token punctuation">[</span>file1<span class="token punctuation">]</span> <span class="token punctuation">[</span>file2<span class="token punctuation">]</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
</code></pre>
<h3>5、分支</h3>
<pre><code class="prism language-c"># 列出所有本地分支
$ git branch

# 列出所有远程分支
$ git branch <span class="token operator">-</span>r

# 列出所有本地分支和远程分支
$ git branch <span class="token operator">-</span>a

# 新建一个分支,但依然停留在当前分支
$ git branch <span class="token punctuation">[</span>branch<span class="token operator">-</span>name<span class="token punctuation">]</span>

# 新建一个分支,并切换到该分支
$ git checkout <span class="token operator">-</span>b <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>

# 新建一个分支,指向指定commit
$ git branch <span class="token punctuation">[</span>branch<span class="token punctuation">]</span> <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 新建一个分支,与指定的远程分支建立追踪关系
$ git branch <span class="token operator">--</span>track <span class="token punctuation">[</span>branch<span class="token punctuation">]</span> <span class="token punctuation">[</span>remote<span class="token operator">-</span>branch<span class="token punctuation">]</span>

# 切换到指定分支,并更新工作区
$ git checkout <span class="token punctuation">[</span>branch<span class="token operator">-</span>name<span class="token punctuation">]</span>

# 切换到上一个分支
$ git checkout <span class="token operator">-</span>

# 建立追踪关系,在现有分支与指定的远程分支之间
$ git branch <span class="token operator">--</span>set<span class="token operator">-</span>upstream <span class="token punctuation">[</span>branch<span class="token punctuation">]</span> <span class="token punctuation">[</span>remote<span class="token operator">-</span>branch<span class="token punctuation">]</span>

# 合并指定分支到当前分支
$ git merge <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>

# 选择一个commit,合并进当前分支
$ git cherry<span class="token operator">-</span>pick <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 删除分支
$ git branch <span class="token operator">-</span>d <span class="token punctuation">[</span>branch<span class="token operator">-</span>name<span class="token punctuation">]</span>

# 删除远程分支
$ git push origin <span class="token operator">--</span>delete <span class="token punctuation">[</span>branch<span class="token operator">-</span>name<span class="token punctuation">]</span>
$ git branch <span class="token operator">-</span>dr <span class="token punctuation">[</span>remote<span class="token operator">/</span>branch<span class="token punctuation">]</span>
</code></pre>
<h3>6、标签</h3>
<pre><code class="prism language-c"># 列出所有tag
$ git tag

# 新建一个tag在当前commit
$ git tag <span class="token punctuation">[</span>tag<span class="token punctuation">]</span>

# 新建一个tag在指定commit
$ git tag <span class="token punctuation">[</span>tag<span class="token punctuation">]</span> <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 删除本地tag
$ git tag <span class="token operator">-</span>d <span class="token punctuation">[</span>tag<span class="token punctuation">]</span>

# 删除远程tag
$ git push origin <span class="token operator">:</span>refs<span class="token operator">/</span>tags<span class="token operator">/</span><span class="token punctuation">[</span>tagName<span class="token punctuation">]</span>

# 查看tag信息
$ git show <span class="token punctuation">[</span>tag<span class="token punctuation">]</span>

# 提交指定tag
$ git push <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token punctuation">[</span>tag<span class="token punctuation">]</span>

# 提交所有tag
$ git push <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token operator">--</span>tags

# 新建一个分支,指向某个tag
$ git checkout <span class="token operator">-</span>b <span class="token punctuation">[</span>branch<span class="token punctuation">]</span> <span class="token punctuation">[</span>tag<span class="token punctuation">]</span>
</code></pre>
<h3>7、查看信息</h3>
<pre><code class="prism language-c"># 显示有变更的文件
$ git status

# 显示当前分支的版本历史,其中commit后黄色字体显示的是每次提交的版本号,git log 命令显示从最近到最远的显示日志
$ git log

# 显示commit历史,以及每次commit发生变更的文件
$ git log <span class="token operator">--</span>stat

# 搜索提交历史,根据关键词
$ git log <span class="token operator">-</span>S <span class="token punctuation">[</span>keyword<span class="token punctuation">]</span>

# 显示某个commit之后的所有变动,每个commit占据一行
$ git log <span class="token punctuation">[</span>tag<span class="token punctuation">]</span> HEAD <span class="token operator">--</span>pretty<span class="token operator">=</span>format<span class="token operator">:</span><span class="token operator">%</span>s

# 显示某个commit之后的所有变动,其<span class="token string">"提交说明"</span>必须符合搜索条件
$ git log <span class="token punctuation">[</span>tag<span class="token punctuation">]</span> HEAD <span class="token operator">--</span>grep feature

# 显示某个文件的版本历史,包括文件改名
$ git log <span class="token operator">--</span>follow <span class="token punctuation">[</span>file<span class="token punctuation">]</span>
$ git whatchanged <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 显示指定文件相关的每一次diff
$ git log <span class="token operator">-</span>p <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 显示过去<span class="token number">5</span>次提交
$ git log <span class="token operator">-</span><span class="token number">5</span> <span class="token operator">--</span>pretty <span class="token operator">--</span>oneline

# 显示所有提交过的用户,按提交次数排序
$ git shortlog <span class="token operator">-</span>sn

# 显示指定文件是什么人在什么时间修改过
$ git blame <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 显示暂存区和工作区的差异
$ git diff

# 显示暂存区和上一个commit的差异
$ git diff <span class="token operator">--</span>cached <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 显示工作区与当前分支最新commit之间的差异
$ git diff HEAD

# 显示两次提交之间的差异
$ git diff <span class="token punctuation">[</span>first<span class="token operator">-</span>branch<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">[</span>second<span class="token operator">-</span>branch<span class="token punctuation">]</span>

# 显示今天你写了多少行代码
$ git diff <span class="token operator">--</span>shortstat <span class="token string">"@{0 day ago}"</span>

# 显示某次提交的元数据和内容变化
$ git show <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 显示某次提交发生变化的文件
$ git show <span class="token operator">--</span>name<span class="token operator">-</span>only <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 显示某次提交时,某个文件的内容
$ git show <span class="token punctuation">[</span>commit<span class="token punctuation">]</span><span class="token operator">:</span><span class="token punctuation">[</span>filename<span class="token punctuation">]</span>

# 显示当前分支的最近几次提交
$ git reflog
</code></pre>
<h3>8、远程同步</h3>
<pre><code class="prism language-c"># 下载远程仓库的所有变动
$ git fetch <span class="token punctuation">[</span>remote<span class="token punctuation">]</span>

# 显示所有远程仓库
$ git remote <span class="token operator">-</span>v

# 显示某个远程仓库的信息
$ git remote show <span class="token punctuation">[</span>remote<span class="token punctuation">]</span>

# 增加一个新的远程仓库,并命名
$ git remote add <span class="token punctuation">[</span>shortname<span class="token punctuation">]</span> <span class="token punctuation">[</span>url<span class="token punctuation">]</span>

# 取回远程仓库的变化,并与本地分支合并
$ git pull <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>

# 上传本地指定分支到远程仓库
$ git push <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>

# 强行推送当前分支到远程仓库,即使有冲突
$ git push <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token operator">--</span>force

# 推送所有分支到远程仓库
$ git push <span class="token punctuation">[</span>remote<span class="token punctuation">]</span> <span class="token operator">--</span>all
</code></pre>
<h3>9、撤销</h3>
<pre><code class="prism language-c"># 恢复暂存区的指定文件到工作区
$ git checkout <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 恢复某个commit的指定文件到暂存区和工作区
$ git checkout <span class="token punctuation">[</span>commit<span class="token punctuation">]</span> <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 恢复暂存区的所有文件到工作区
$ git checkout <span class="token punctuation">.</span>

# 重置暂存区的指定文件,与上一次commit保持一致,但工作区不变
$ git reset <span class="token punctuation">[</span>file<span class="token punctuation">]</span>

# 重置暂存区与工作区,与上一次commit保持一致
$ git reset <span class="token operator">--</span>hard

# 重置当前分支的指针为指定commit,同时重置暂存区,但工作区不变
$ git reset <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 重置当前分支的HEAD为指定commit,同时重置暂存区和工作区,与指定commit版本一致
$ git reset <span class="token operator">--</span>hard <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 重置当前HEAD为指定commit,但保持暂存区和工作区不变
$ git reset <span class="token operator">--</span>keep <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 新建一个commit,用来撤销指定commit
# 后者的所有变化都将被前者抵消,并且应用到当前分支
$ git revert <span class="token punctuation">[</span>commit<span class="token punctuation">]</span>

# 暂时将未提交的变化移除,稍后再移入
$ git stash
$ git stash pop
</code></pre>
<h3>10、其他</h3>
<pre><code class="prism language-c"># 生成一个可供发布的压缩包
$ git archive

# 添加或指定远程仓库地址
$ git remote set<span class="token operator">-</span>url origin <span class="token string">"https://..."</span>
$ git config remote<span class="token punctuation">.</span>origin<span class="token punctuation">.</span>url <span class="token string">"https://..."</span>

# 删除
$ git remote rm origin
</code></pre>
<h1>Hexo准备</h1>
<h2>node.js安装及配置</h2>
<p>node.js官网下载默认安装之后<br> CMD窗口,执行命令node -v查看node版本<br> 最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本<br> <img src="https://img-blog.csdnimg.cn/681b0165ee094cf8a76a3cab28584349.png" alt="在这里插入图片描述"></p>
<h3>(可选)修改全局依赖包下载路径</h3>
<p>默认情况下,我们在执行npm install -g XXXX下载全局包时,这个包的默认存放路径位C:\Users\用户名\AppData\Roaming\npm\node_modules下,可以通过CMD指令npm root -g查看</p>
<p>C:\Users\liaijie\AppData\Roaming\npm\node_modules<br> 但是有时候我们不想让全局包放在这里,我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径:</p>
<p>npm config set prefix “C:\node\node_global”<br> npm config set cache “C:\node\node_cache”<br> 或者打开c:\node\node_modules\npm.npmrc文件,修改如下:</p>
<p>prefix =C:\node\node_global<br> cache = C:\node\node_cache</p>
<p>以上操作表示,修改全局包下载目录为C:\node\node_global,缓存目录为C:\node\node_cache,并会自动创建node_global目录,而node_cache目录是缓存目录,会在你下载全局包时自动创建</p>
<p>在这里插入图片描述<br> 3、配置环境变量<br> 因为我们修改了全局包的下载路径,那么自然而然,我们下载的全局包就会存放在c:\node\node_global\node_modules,而其对应的cmd指令会存放在c:\node\node_global</p>
<p>我全局安装一个vue-cli脚手架</p>
<p>npm install @vue/cli -g<br> 安装完成后:</p>
<p>在这里插入图片描述</p>
<p>在这里插入图片描述</p>
<p>我使用CMD命令vue create myproject指令创建一个项目,显示如下<br> ‘vue’ 不是内部或外部命令,也不是可运行的程序<br> 或批处理文件。<br> 这是因为我们在执行指令时,它会默认在node安装根目录下查找指令文件,在这里就是vue.cmd,然后还会在node安装根目录下的node_modules下查找依赖包文件夹,在这里就是@vue文件夹,因为我们修改了全局包的存放路径,所以自然找不到了,所以我们需要把我们指定的全局包存放路径添加到系统环境变量,这样就可以找到了</p>
<p>在这里插入图片描述</p>
<p>再次测试:</p>
<p>C:\Users\liaijie&gt;vue create myproject<br> ? Your connection to the default npm registry seems to be slow.<br> Use https://registry.npm.taobao.org for faster installation? (Y/n)<br> OK,大功告成!!!!!</p>
<h2>hexo安装及配置</h2>
<p>Hexo官网<br> 去官网拿到安装命令<br> npm install hexo-cli -g<br> 1、安装Hexo,只需要在MyWeb目录中单击右键启动Git Bash Here,然后输入命令<br> <img src="https://img-blog.csdnimg.cn/4fbd89e819f54b56bb0240ef0dbcfd80.png" alt="在这里插入图片描述">2、初始化 Hexo<br> Hexo安装完以后需要进行初始化操作。</p>
<h3>一、自己创建文件夹</h3>
<p>在电脑中创建一个文件夹用来存放博客,如:E:\MyWeb之后的命令行操作都在这个文件夹的目录下进行。</p>
<p><img src="https://img-blog.csdnimg.cn/ce410396713249a9b5da848d3711a009.png" alt="在这里插入图片描述"><br> 生成默认博客:hexo init<br> <img src="https://img-blog.csdnimg.cn/14ce17e7b8c54082b3fe0d165033eabf.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/4be47825625147da84b3b848056bf3db.png" alt="在这里插入图片描述"><br> 本地启动:hexo s</p>
<p><img src="https://img-blog.csdnimg.cn/fd0e48e7ef80456fa278c3de1ff827fb.png" alt="在这里插入图片描述"></p>
<p>打开浏览器输入:http://localhost:4000,看到如下画面说明建站成功:<br> <img src="https://img-blog.csdnimg.cn/b2fdf663c9ed49e9a61bc3eb965a7e5e.png" alt="在这里插入图片描述"></p>
<h4>提交到Gitee上</h4>
<p>打开E:\MyWeb下的_config.yml文件</p>
<p>修改以下代码:</p>
<pre><code class="prism language-c">deploy<span class="token operator">:</span>
type<span class="token operator">:</span> git
repo<span class="token operator">:</span> https<span class="token operator">:</span><span class="token comment">//gitee.com/weizhongqin/weizhongqin.git   #将地址换成自己的地址</span>
branch<span class="token operator">:</span> master
</code></pre>
<h4>安装部署插件:</h4>
<p><code>npm install hexo-deployer-git --save</code></p>
<p><img src="https://img-blog.csdnimg.cn/e817db54ebcd451b84138826b1587785.png" alt="在这里插入图片描述"></p>
<h4>清理缓存:</h4>
<p><code>hexo clean</code><br> 清除缓存文件 (db.json) 和已生成的静态文件 (public)。<br> 生成静态文件:<code>hexo g</code></p>
<p><img src="https://img-blog.csdnimg.cn/b2feabb4f89f4bdf8de00f13c4364308.png" alt="在这里插入图片描述"></p>
<h4>推送到Gitee:</h4>
<p><code>hexo d Gitee的用户名/邮箱 密码</code></p>
<pre><code class="prism language-c">F<span class="token operator">:</span>\blog<span class="token operator">&gt;</span>hexo d <span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span> <span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span><span class="token operator">*</span>
INFOValidating config
INFODeploying<span class="token operator">:</span> git
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/41febb5e2eb74785a36d4694c80422d8.png" alt="在这里插入图片描述"></p>
<p>打开Gitee仓库,可以看到我们推送成功的静态文件的目录结构:<img src="https://img-blog.csdnimg.cn/d60d0dcaf58241a79390732e0e81f0fd.png" alt="在这里插入图片描述"></p>
<p>再次修改根目录下的_config.yml文件:</p>
<pre><code class="prism language-c"><span class="token macro property"><span class="token directive-hash">#</span> <span class="token expression">URL</span></span>
## Set your site url here<span class="token punctuation">.</span> For example<span class="token punctuation">,</span> <span class="token keyword">if</span> you use GitHub Page<span class="token punctuation">,</span> set url as 'https<span class="token operator">:</span><span class="token comment">//username.github.io/project'</span>
url<span class="token operator">:</span> http<span class="token operator">:</span><span class="token comment">//weizhongqin.gitee.io#填写自己Gitee Page的网站地址</span>
permalink<span class="token operator">:</span> <span class="token operator">:</span>year<span class="token operator">/</span><span class="token operator">:</span>month<span class="token operator">/</span><span class="token operator">:</span>day<span class="token operator">/</span><span class="token operator">:</span>title<span class="token operator">/</span>
permalink_defaults<span class="token operator">:</span>
pretty_urls<span class="token operator">:</span>
trailing_index<span class="token operator">:</span> true # Set to false to remove trailing <span class="token char">'index.html'</span> from permalinks
trailing_html<span class="token operator">:</span> true # Set to false to remove trailing <span class="token char">'.html'</span> from permalinks
</code></pre>
<h4>更新Gitee Pages</h4>
<p>每次修改博客内容后都需要做以下操作:</p>
<pre><code class="prism language-c">hexo clean

hexo g<span class="token operator">/</span>hexo d <span class="token operator">-</span>g<span class="token operator">/</span>hexo deploy <span class="token operator">-</span>g

hexo d
</code></pre>
<p>更新Gitee Pages服务<br> <img src="https://img-blog.csdnimg.cn/a4155b3104a747488362308c2b8c0051.png" alt="在这里插入图片描述"><br> 打开浏览器输入地址:https://weizhongqin.gitee.io/,访问成功就行了</p>
<hr>
<h4>(可用)命令创建文件夹</h4>
<pre><code class="prism language-c">$ hexo init <span class="token punctuation">[</span>folder<span class="token punctuation">]</span>
</code></pre>
<p>新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。<br> <img src="https://img-blog.csdnimg.cn/fc865c0e557146efb55767f21cba23c0.png" alt="在这里插入图片描述"></p>
<p>然后就可以使用Hexo三连了,即我们最常用的三个主要命令(依旧在上述Git Bash命令端口中)cd到新的网站文件夹里:</p>
<pre><code class="prism language-c">hexo clean # 清空已有hexo网站文件
hexo generate# 依据网页文本与新的CSS样式生成新网站文件
hexo server# 启动本地服务器,可以在localhost<span class="token operator">:</span><span class="token number">4000</span>查看
</code></pre>
<p>网站修改效果,一般默认的是一个landscape主题,后期当提交新文章或者新的样式修改时,往往都是先从本地查看结果无误后再部署到Gitee Page<br> <img src="https://img-blog.csdnimg.cn/0f74c92482704bde9b598e09649bf28c.png" alt=""></p>
<h3>三、主题下载与安装</h3>
<p>Hexo官网上提供了丰富的主题可选,你只需要打开对应的界面选择喜欢的,然后点击名称跳转到GitHub仓库选择下载或者克隆对应的zip文件到本地,并且解压到网站目录下的themes目录即可。<br> <img src="https://img-blog.csdnimg.cn/951359cfd3614ee481b1bad10abdadc5.png" alt="在这里插入图片描述"></p>
<blockquote>
<p>然后接下来,你需要修改两个配置文件:<br> <strong>你的网站根目录下的_config.yml文件,即网站配置文件;</strong><br> <strong>你选择的主题的自带配置文件_config.yml,即主题配置文件;</strong><br> 网站配置文件会配置你网站的URL地址、博客名称以及与Gitee上传的方式等基本信息;而主题配置文件则会定义实际页面显示的美观效果、多媒体(声音视频等)以及评论等附加功能。</p>
</blockquote>
<h3>四、网站配置文件修改</h3>
<p>制定网站采用的主题样式,这里也需要注意:主题文件解压缩后不要重命名,直接将主题文件名称复制后设置为网站主题,即</p>
<pre><code class="prism language-c"><span class="token macro property"><span class="token directive-hash">#</span> <span class="token expression">Extensions</span></span>
## Plugins<span class="token operator">:</span> https<span class="token operator">:</span><span class="token comment">//hexo.io/plugins/</span>
## Themes<span class="token operator">:</span> https<span class="token operator">:</span><span class="token comment">//hexo.io/themes/</span>
## theme<span class="token operator">:</span> landscape
theme<span class="token operator">:</span> hexo<span class="token operator">-</span>theme<span class="token operator">-</span>volantis<span class="token operator">-</span><span class="token number">6.0</span> #填写自己的样式文件夹的名字
</code></pre>
<p>配置里还有个选项比较好玩</p>
<pre><code class="prism language-c"><span class="token macro property"><span class="token directive-hash">#</span> <span class="token expression">Site</span></span>
title<span class="token operator">:</span> Wei Zhongqin的博客
subtitle<span class="token operator">:</span> <span class="token char">''</span>
description<span class="token operator">:</span> <span class="token char">''</span> # description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。
keywords<span class="token operator">:</span>
author<span class="token operator">:</span> Wei Zhongqin
language<span class="token operator">:</span> zh<span class="token operator">-</span>Hans
timezone<span class="token operator">:</span> <span class="token char">''</span>

</code></pre>
<blockquote>
<p>主题文件下的README.md文件以根据主题特点实现自定制网站。</p>
</blockquote>
<blockquote>
<p>在此之前,你还需要在网站的Git Bash中运行一次安装所有主题依赖插件包的命令:</p>
</blockquote>
<pre><code class="prism language-c">npm install
npm install <span class="token operator">--</span>save hexo<span class="token operator">-</span>deployer<span class="token operator">-</span>git   #为之后做准备,不装会报错:ERROR Deployer not found<span class="token operator">:</span> git
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/282772904ca846e89ce92ef5cce19325.png" alt=""></p>
<p>完成之后可以执行三行命令将本地静态资源push到码云</p>
<pre><code class="prism language-c">hexo clean    #清理
hexo g      #生成静态资源
hexo d      #将本地资源提高到码云
</code></pre>
<p>然后去gitee上更新一下pages,然后原神–启动,就可以看到了:</p>
<p><img src="https://img-blog.csdnimg.cn/947dc04a397f46bc9e50cf87098a2cd9.png" alt="在这里插入图片描述"></p>
<h3>五、Volantis主题个性化</h3>
<h4>1、"Hello World"特效(通用)</h4>
<p>修改主题配置文件里的标题</p>
<pre><code class="prism language-c">############################### Cover ############################### <span class="token operator">&gt;</span> start
cover<span class="token operator">:</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
title<span class="token operator">:</span> '<span class="token operator">&lt;</span>font<span class="token operator">&gt;</span><span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span> <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>World<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>font<span class="token operator">&gt;</span>'
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
</code></pre>
<p>引入以下css样式,推荐添加到hexo/source/css/style.styl 里</p>
<pre><code class="prism language-c">

<span class="token comment">/* 此处调节字体大小
.top .title font{
    font-size: 1em;
}
*/</span>
<span class="token punctuation">.</span>top <span class="token punctuation">.</span>title span<span class="token punctuation">{</span>
    transition<span class="token operator">:</span> <span class="token number">0.5</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>top <span class="token punctuation">.</span>title<span class="token operator">:</span>hover span<span class="token operator">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    margin<span class="token operator">-</span>right<span class="token operator">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>top <span class="token punctuation">.</span>title<span class="token operator">:</span>hover span<span class="token operator">:</span>nth<span class="token operator">-</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    margin<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>top <span class="token punctuation">.</span>title<span class="token operator">:</span>hover span<span class="token punctuation">{</span>
    color<span class="token operator">:</span> #fff<span class="token punctuation">;</span>
    text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">10</span>px #fff<span class="token punctuation">,</span>
               <span class="token number">0</span> <span class="token number">0</span> <span class="token number">20</span>px #fff<span class="token punctuation">,</span>
               <span class="token number">0</span> <span class="token number">0</span> <span class="token number">40</span>px #fff<span class="token punctuation">,</span>
               <span class="token number">0</span> <span class="token number">0</span> <span class="token number">80</span>px #fff<span class="token punctuation">,</span>
               <span class="token number">0</span> <span class="token number">0</span> <span class="token number">120</span>px #fff<span class="token punctuation">,</span>
               <span class="token number">0</span> <span class="token number">0</span> <span class="token number">160</span>px #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/b8b83f02503a4a10aa87b67ff7ec1ed3.png" alt="在这里插入图片描述"></p>
<h4>2、自定义导航栏</h4>
<p>在_config.yml中放入导航栏,这里就以我的为例</p>
<pre><code class="prism language-c">############################### Cover ############################### <span class="token operator">&gt;</span> start
cover<span class="token operator">:</span>
height_scheme<span class="token operator">:</span> full # full<span class="token punctuation">,</span> half
layout_scheme<span class="token operator">:</span> dock # <span class="token function">blank</span> <span class="token punctuation">(</span>留白<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">search</span> <span class="token punctuation">(</span>搜索<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">dock</span> <span class="token punctuation">(</span>坞<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">featured</span> <span class="token punctuation">(</span>精选<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">focus</span> <span class="token punctuation">(</span>焦点<span class="token punctuation">)</span>
display<span class="token operator">:</span>
    home<span class="token operator">:</span> true
    archive<span class="token operator">:</span> true
    others<span class="token operator">:</span> false # can be written in front<span class="token operator">-</span>matter <span class="token char">'cover: true'</span>
background<span class="token operator">:</span> https<span class="token operator">:</span><span class="token comment">//gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg</span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">background</span><span class="token expression"><span class="token operator">:</span> https<span class="token operator">:</span></span><span class="token comment">//bing.ioliu.cn/v1/rand?w=1920&amp;h=1200</span></span>
logo<span class="token operator">:</span> # https<span class="token operator">:</span><span class="token comment">//cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-Cover@3x.png</span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">title</span><span class="token expression"><span class="token operator">:</span> </span><span class="token char">'Wei Zhongqin的博客'</span><span class="token expression"># </span><span class="token string">"Hello World"</span><span class="token expression">特效<span class="token punctuation">(</span>通用<span class="token punctuation">)</span></span></span>
title<span class="token operator">:</span> '<span class="token operator">&lt;</span>font<span class="token operator">&gt;</span><span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>Wei Zhongqin<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span> <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>的博客<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>font<span class="token operator">&gt;</span>'
subtitle<span class="token operator">:</span> <span class="token char">'好记性不如烂笔头'</span>
search<span class="token operator">:</span> 搜一下 # search bar placeholder
features<span class="token operator">:</span>
    <span class="token operator">-</span> name<span class="token operator">:</span> 主页
      icon<span class="token operator">:</span> #
      url<span class="token operator">:</span> <span class="token operator">/</span>
    <span class="token operator">-</span> name<span class="token operator">:</span> 标签
      icon<span class="token operator">:</span> #
      url<span class="token operator">:</span> tags<span class="token operator">/</span>
    <span class="token operator">-</span> name<span class="token operator">:</span> 关于
      icon<span class="token operator">:</span> #
      url<span class="token operator">:</span> about<span class="token operator">/</span>

############################### Cover ############################### <span class="token operator">&gt;</span> end
</code></pre>
<p>对应好各个页面的url名字即可</p>
<h4>3、自定义页脚</h4>
<pre><code class="prism language-c">site_footer<span class="token operator">:</span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">layout</span> <span class="token expression">of footer<span class="token operator">:</span> <span class="token punctuation">[</span>aplayer<span class="token punctuation">,</span> social<span class="token punctuation">,</span> license<span class="token punctuation">,</span> info<span class="token punctuation">,</span> copyright<span class="token punctuation">]</span></span></span>
layout<span class="token operator">:</span> <span class="token punctuation">[</span>aplayer<span class="token punctuation">,</span> social<span class="token punctuation">,</span> license<span class="token punctuation">,</span> info<span class="token punctuation">,</span> copyright<span class="token punctuation">]</span>
social<span class="token operator">:</span>
    <span class="token operator">-</span> icon<span class="token operator">:</span> fas fa<span class="token operator">-</span>rss
      url<span class="token operator">:</span> atom<span class="token punctuation">.</span>xml
    <span class="token operator">-</span> icon<span class="token operator">:</span> fas fa<span class="token operator">-</span>envelope
      url<span class="token operator">:</span> mailto<span class="token operator">:</span>#你的邮箱
    <span class="token operator">-</span> icon<span class="token operator">:</span> fab fa<span class="token operator">-</span>github
      url<span class="token operator">:</span> #你的github地址
copyright<span class="token operator">:</span> <span class="token char">'(/)'</span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token expression">You can add your own property here<span class="token punctuation">.</span> <span class="token punctuation">(</span>Support markdown<span class="token punctuation">,</span> <span class="token keyword">for</span> example<span class="token operator">:</span> br<span class="token operator">:</span> </span><span class="token char">'&lt;br&gt;'</span><span class="token expression"><span class="token punctuation">)</span></span></span>
br<span class="token operator">:</span> <span class="token char">'&lt;br&gt;'</span>
</code></pre>
<h4>4、添加评论系统</h4>
<p>首先要去github创建一个公共仓库,我们就叫他comments 然后打开comments的discussion功能(在仓库的setting中,找到Features)勾选<br> <img src="https://img-blog.csdnimg.cn/7d7504b147934f748f50089ad623fc25.png" alt="在这里插入图片描述"><br> 然后打开giscus,填入你的仓库<br> <img src="https://img-blog.csdnimg.cn/d1fe1b4a336b4d3e8aa06c593ab1b3f4.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/de29d352b7d340c1a15148a10504ff72.png" alt="在这里插入图片描述"><br> 我用的是这个模式<br> <img src="https://img-blog.csdnimg.cn/0377cda67a85425c932f6d5c95c178be.png" alt="在这里插入图片描述"><br> 这里会生成你需要用的参数填进主题配置文件里就行</p>
<p><img src="https://img-blog.csdnimg.cn/cb419a0b37d1490c922441f4b081250e.png" alt="在这里插入图片描述"></p>
<pre><code class="prism language-c">############################### Comments ############################### <span class="token operator">&gt;</span> start
comments<span class="token operator">:</span>
service<span class="token operator">:</span> giscus
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">giscus</span></span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">https</span><span class="token expression"><span class="token operator">:</span></span><span class="token comment">//giscus.app</span></span>
<span class="token macro property"><span class="token directive-hash">#</span> <span class="token directive keyword">https</span><span class="token expression"><span class="token operator">:</span></span><span class="token comment">//github.com/laymonage/giscus</span></span>
giscus<span class="token operator">:</span>
    # 以下配置按照 yml 格式增删填写即可
   repo<span class="token operator">:</span> #库的名字
   repo<span class="token operator">-</span>id<span class="token operator">:</span> #库id,标红框的第一个
   category<span class="token operator">:</span> Announcements
   category<span class="token operator">-</span>id<span class="token operator">:</span> #目录id,标红框的第二个
   mapping<span class="token operator">:</span> <span class="token string">"pathname"</span>
   reactions<span class="token operator">-</span>enabled<span class="token operator">:</span> <span class="token string">"1"</span>
   emit<span class="token operator">-</span>metadata<span class="token operator">:</span> <span class="token string">"0"</span>
   lang<span class="token operator">:</span> <span class="token string">"zh-CN"</span>
theme<span class="token operator">:</span>
    light<span class="token operator">:</span> <span class="token string">"light"</span> # https<span class="token operator">:</span><span class="token comment">//gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css</span>
    dark<span class="token operator">:</span> <span class="token string">"dark"</span> # https<span class="token operator">:</span><span class="token comment">//gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css</span>


############################### Comments ############################### <span class="token operator">&gt;</span> end
</code></pre>
<p>其他配置可以参考Volantis官网文档</p>
<h3>参考</h3>
<p>hexo建站官方文档<br> Gitee搭建个人博客 (一)前言 beacuse(事出有因)<br> 搭建个人博客详细教程_向光°的博客-CSDN博客</p><br><br>
来源:https://www.cnblogs.com/weizhongqin-wcj/p/17554847.html
頁: [1]
查看完整版本: 基于gitee+hexo搭建个人博客