Gitee+Hexo搭建博客(上)-建站,配置与部署
<h2 id="20201104-该文章已被盗">2020.11.04 该文章已被盗</h2><p>http://www.manongjc.com/detail/20-sxlzxxrkavxbkxq.html</p>
<h2 id="成品效果">成品效果</h2>
<h2 id="前言">前言</h2>
<p>最近发现wordpress不能很好的同时支持markdown和Latex数学公式,国内的服务器又在备案,于是就选择了支持原生Markdown的Hexo博客系统,况且云服务器费用也是一笔不小的开支(钱都用来填饱肚子了qwq)<br>
但码云不支持使用自己的域名就很难受(下篇会将博客部署到服务器,这样就可以使用自定义域名了)</p>
<p><s>其实就是闲的蛋疼想找点事做</s></p>
<p>无论干什么也一定要看官方文档啊(血泪教训)</p>
<p><strong>Hexo中文文档</strong></p>
<h2 id="安装运行环境">安装运行环境</h2>
<p>(个人搭建时使用的win10系统) 关于安装运行环境,官方文档上有针对不同系统的详细说明,不再赘述</p>
<p>如果是第一次接触到Git 可以看一下 菜鸟驿站的Git简明指南</p>
<h2 id="建站">建站</h2>
<p>参考官方文档<br>
安装(不贴安装命令是因为安装命令可能随时更换,但官方文档必定是最准确的)</p>
<p>使用命令行进入安装目录的上一级目录,新建一个空文件夹</p>
<p>接下来执行</p>
<pre><code>hexo init <folder>
cd <folder>
npm install
</code></pre>
<p>来进行网站的初始化,其中 "<folder>"是新建的文件夹的名字</folder></p>
<p>对于这种警告<br>
<img src="https://s1.ax1x.com/2020/09/10/wJyWNR.jpg" alt="wJyWNR.jpg" loading="lazy"></p>
<p>可以完全忽略,因为这是Node.js在mac系统上的bug(有兴趣可以自行百度)</p>
<p>这样你的网站就建好了(雾),来访问一下看看吧:<br>
执行命令</p>
<pre><code>hexo clean //清除缓存与静态文件
hexo generate //生成静态文件,可简写为 hexo g
hexo server //启动本地网站服务器,可简写为 hexo s
</code></pre>
<p>通过命令行的反馈可以看到,本地网站网址为<br>
<strong>http://localhost:4000</strong></p>
<p>让我们进去看看吧<br>
是这个样子:</p>
<p><img src="https://s1.ax1x.com/2020/09/10/wJy536.png" alt="wJy536.png" loading="lazy"></p>
<p>看完后按 Ctrl+C 退出</p>
<p>详细的hexo的命令请参考官方文档</p>
<h2 id="部署">部署</h2>
<p>只在本地看怎末能行?搭建网站就是为了让更多人看到内容<br>
下面开始将网站部署在 <strong>Gitee</strong><br>
(为什么是Gitee? 因为Gitee在国内访问比Github快)</p>
<h3 id="创建仓库">创建仓库</h3>
<p>登录码云(没有账号的自己注册去!),新建一个仓库,将他命名为你网站的名字(很重要!,命名不同会很麻烦)</p>
<p>在 <strong>仓库页-服务-Gitee Pages</strong> (需要绑定手机)<br>
中打开Gitee Pages 服务<br>
部署分支建议选择master,部署目录是整个仓库</p>
<h3 id="创建ssh">创建SSH</h3>
<p>什么是SSH?简单说就是对远程登录会话和其他网络服务提供安全性的协议,Git的 <code>remote</code>操作需要使用SSH密钥<br>
下面创建一个ssh密钥对<br>
打开Git Bash(在开始菜单有) 键入</p>
<pre><code>ssh-keygen -t rsa -C “your_email@example.com”
</code></pre>
<p>邮箱为你注册码云的邮箱<br>
其中会让你确认和输入密码,密码可不填(直接按回车)</p>
<p>创建完的ssh公钥对会在 用户/.ssh/文件夹中<br>
将/.ssh 文件夹中的 "xxx.pub"文件打开,里面的内容就是ssh公钥了</p>
<p>打开 <strong>码云个人主页-个人设置-安全设置-ssh公钥</strong>里将公钥填上,名字可以随便取</p>
<p>如果没有看懂,可以看码云-SSH公钥详细的图文教程</p>
<p>因为Git是分布式版本控制系统，所以每个机器都必须自报家门：你的名字和Email地址（都不会进行验证），这样远程仓库才知道哪次提交是由谁完成的。所以接着设定git用户名和邮箱</p>
<pre><code>git config --global user.name "Your Name"
git config --global user.email "email@example.com"
</code></pre>
<p>建议填你注册码云的用户名和邮箱</p>
<p><s>接下来这一步卡了我蛮长时间的</s></p>
<h3 id="部署到仓库">部署到仓库</h3>
<p>首先安装一键部署插件</p>
<pre><code>npm install hexo-deployer-git --save
</code></pre>
<p>打开hexo博客目录中的 <code>_config.yml</code> 文件<br>
找到 <code>deploy:</code> 并增加</p>
<pre><code>deploy:
type: git
repo: 你博客的git地址
branch: master
</code></pre>
<p>"你博客的git地址" 可在仓库页<br>
<img src="https://s1.ax1x.com/2020/09/11/wNAkRS.png" alt="wNAkRS.png" loading="lazy"><br>
中复制</p>
<p>更多部署参数可在官方文档查看</p>
<p>然后修改默认路径,在 <code>_config.yml</code> 文件修改 <code>url </code>, <code>root</code>:</p>
<pre><code>url:仓库地址
root: / 仓库的名字/
</code></pre>
<p>这样就可以推送博客辣~</p>
<p>执行命令</p>
<pre><code>hexo clean
hexo g
hexo depoly//部署到网络,可简写为hexo d
</code></pre>
<p>接下来更新Gitee Pages 服务,访问Gitee Pages的网站地址<br>
<img src="https://s1.ax1x.com/2020/09/10/wJy536.png" alt="wJy536.png" loading="lazy"></p>
<p>成功部署到了云端</p>
<h4 id="提示">提示</h4>
<p>由于时静态页面,在调试时,一定要及时清理浏览器缓存和更新Gitee Pages<br>
或使用浏览器的Devtools禁用该网站的缓存进行网站实时更新</p>
<h3 id="如果网站格式丢失">如果网站格式丢失</h3>
<p>如果部署到云端是网站格式丢失但本地部署无问题</p>
<p><img src="https://s1.ax1x.com/2020/09/11/wNMrS1.png" alt="wNMrS1.png" loading="lazy"></p>
<p>在网页中打开调试模式 <strong>(F12)</strong> 发现报了很多错<br>
原来是找不到 js和css 文件,无法渲染网页</p>
<p>重新修改 <code>url</code>, <code>root</code><br>
注意 root 一定要是仓库的名字</p>
<h3 id="仓库介绍与开源声明">仓库介绍与开源声明</h3>
<p>当你回到码云仓库页的时候, 我的项目介绍呢? 我的开源许可证呢?</p>
<p>原来是hexo部署会把整个仓库(的分支)清空,所以 <code>README.md</code> 和 <code>LICENSE</code>被删掉了<br>
我们应该将 <code>README.md</code> 和 <code>LICENSE</code> 放到网站目录的 <code>/soucre</code> 目录下</p>
<p>但是,众所周知:Hexo页面和文章使用MarkDown语言撰写,当执行</p>
<pre><code>hexo g
</code></pre>
<p>命令时,Markdown页面会被"编译"成使用HTML语言的标准网页(标准说法是:生成静态网页)</p>
<p>但码云只认README.md,我们可以通过对网站文件夹中的 <code>_config.yml</code> 进行修改<br>
将 <code>skip_render: </code>选项后加入 <code>README.md</code> 来跳过对 <code>README.md</code> 的"编译"</p>
<p>问题解决了</p>
<h3 id="网站信息自定义">网站信息自定义</h3>
<p>如何让这个网站看起来像你自己的?<br>
首先要更改网站的信息,包括</p>
<ul>
<li>网站主/副标题</li>
<li>网站介绍</li>
</ul>
<p>可在网站目录下的<code>_config.yml</code> 文件中 <code>site</code> 栏修改</p>
<p><img src="https://s1.ax1x.com/2020/09/11/wNt1fS.png" alt="wNt1fS.png" loading="lazy"></p>
<h2 id="使用">使用</h2>
<p>写作其实很简单,你可以使用官方文档<br>
也可以在<code>source/_posts/</code>下直接新建一个markdown文件,只不过文章的<strong>Front-matter</strong>需要你自己添加</p>
<h3 id="front-matter">Front-matter</h3>
<p>Front-matter就是一个可以指定文章详细内容的标签</p>
<p>常用的有:</p>
<ul>
<li>title 文章标题</li>
<li>date文章创建日期</li>
<li>tags文章标签</li>
<li>categories 文章分类</li>
</ul>
<p>比如本篇文章的Front-matter</p>
<pre><code>
---
title: 使用Hexo搭建博客(上)-建站,配置与部署
date: 2020-09-09 21:16:33
categories: 网站建设
tags:
- 网站
- 博客
- 教程
---
</code></pre>
<h2 id="结尾">结尾</h2>
<ul>
<li>不想看Hexo的默认主题?</li>
<li>在网站中加入评论区?</li>
<li>在网站中加入炫酷特效?</li>
<li>好康的看板娘?</li>
<li>不想使用又长又臭的码云提供的域名?</li>
</ul>
<p>欢迎查看<br>
使用Hexo搭建博客(下)-美化,功能与杂项</p><br><br>
来源：https://www.cnblogs.com/frozenpang/p/13815163.html
頁:
[1]