Hexo+Github博客搭建小白教程
<h2>Hexo+Github博客搭建小白教程</h2><p>昨天宅在家里一天捣鼓一天的搭建的博客，基本功能是有了，当然还有很多不足以后慢慢修饰吧</p>
<p>博客地址：点击查看</p>
<p>效果图：</p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829200357135-259408893.png" width="500" loading="lazy"><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829200432256-228758574.png" width="500" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829200515468-817676271.png" width="500" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829200534723-1513123194.png" width="500" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829200604192-290707240.png" width="500" loading="lazy"></p>
<p> </p>
<p> </p>
<p>是不是还挺挺炫酷的，现在来开始搭建吧</p>
<p>首先安装好环境，环境自行百度本篇不做介绍了</p>
<h3>1、安装Node.js</h3>
<p>点击地址</p>
<h3>2、添加国内镜像源</h3>
<p>如果没有梯子的话，可以使用阿里的国内镜像进行加速。</p>
<div class="cnblogs_code">
<pre>npm config set registry https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org</span></pre>
</div>
<h3>3、安装Git（MAC 自带忽略）</h3>
<p><em><em>点击安装教程 地址</em></em></p>
<p>以上1、2、3都安装环境已经安装直接跳过</p>
<h3>4、注册Github账号</h3>
<p> </p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829195739656-1465253212.jpg" width="500" loading="lazy"></p>
<p> </p>
<p>两个箭头名字最好一致</p>
<p>加入前面地址 pikachuworld， 后面的 songxiaotao.github.io 那么你的博客地址就会变成https://pikachuworld.github.io/songxiaotao.github.io </p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829203140106-1655936054.jpg" width="500" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829203152342-914214414.jpg" width="500" loading="lazy"></p>
<p>选择主题</p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829203208414-478776744.png" width="500" loading="lazy"></p>
<p>打开上面github博客地址https://pikachuworld.github.io/</p>
<p>初步效果图：</p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829203519477-1392577090.png" width="500" loading="lazy"></p>
<p> </p>
<p>按<code>ctrl+c</code>关闭本地服务器。</p>
<p>首先右键打开git bash，然后输入下面命令</p>
<div class="cnblogs_code">
<pre>git config --global user.name "pikachuWorld"<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">用户名</span>
git config --global user.email "XXXX@163.com"<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">邮箱</span></pre>
</div>
<p>用户名和邮箱根据你注册github的信息自行修改。</p>
<p>然后生成密钥SSH key：</p>
<div class="cnblogs_code">
<pre>ssh-keygen -t rsa -C "xxx@163.com" // </pre>
</div>
<p>打开github，在头像下面点击<code>settings</code>，再点击<code>SSH and GPG keys</code>，新建一个SSH，名字随便。</p>
<p>git bash中输入 </p>
<div class="cnblogs_code">
<pre>cat ~/.ssh/id_rsa.pub</pre>
</div>
<p>在gitlab上绑定公钥</p>
<p>setting→SSH Keys→Add an SSH key</p>
<p>将输出的内容复制到框中，点击确定保存。</p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829210834783-807181574.jpg" width="500" loading="lazy"></p>
<p>输入<code>ssh -T git@github.com</code>，如果如下图所示，出现你的用户名，那就成功了。</p>
<p><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829210553714-2037026485.jpg" width="500" loading="lazy"></p>
<p>打开博客根目录下的<code>_config.yml</code>文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。</p>
<p>修改最后一行的配置：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">deploy:
type: git
repository: https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">github.com/pikachuWorld/pikachuWorld.github.io.git //你的github项目地址</span>
branch: master</pre>
</div>
<h3>5、写、发布文章</h3>
<p>首先在博客根目录下右键打开git bash，安装一个扩展<code>npm i hexo-deployer-git</code>。</p>
<p>然后输入<code>hexo new post "article title"</code>，新建一篇文章。</p>
<p>然后打开 \你的<code>blog目录\source\_posts</code>的目录，可以发现下面多了一个文件夹和一个<code>.md</code>文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。</p>
<p>编写完markdown文件后，根目录下输入<code>hexo g</code>生成静态网页，然后输入<code>hexo s</code>可以本地预览效果，最后输入<code>hexo d</code>上传到github上。这时打开你的github.io主页就能看到发布的文章啦。</p>
<p> </p>
<h3>6、个性化设置（matery主题）</h3>
<p>下面的个性化设置主要针对的是<code>matery</code>主题 主题的原地址在这里：点击查看</p>
<h3>7、 <em>遇到的坑解决方案</em></h3>
<p><em><em><em>按照教程配置之后</em></em></em></p>
<p><strong><em><em><em>1、注意hexo d发布的时候输入用户密码报错</em></em></em></strong></p>
<p id="articleContentId" class="title-article"><span style="color: rgba(255, 0, 0, 1)">remote: Support for password authentication was removed on August 13, 2021.</span></p>
<p>这是因为github为什么要把密码换成token，把密码换成token就可以了，致于怎么创建具体看下面的教程</p>
<p>如何生成自己的token</p>
<p>这是因为github为什么要把密码换成token，把密码换成token就可以了，致于怎么创建具体看下面的教程</p>
<p>如何生成自己的token</p>
<p>2、关于配置评论模块（配置有风险当心获取你clientSecret你清空的github）这个配置但是评论还有bug，先留着以后查找一下</p>
<p class="h2 mb-3">为Hexo添加Gitalk评论插件https://segmentfault.com/a/1190000014085547</p>
<p class="h2 mb-3">3、Hexo: 添加Valine评论(邮件通知、评论列表头像)</p>
<p class="h2 mb-3"><em> 点击教程</em></p>
<p class="h2 mb-3"><em>配置之后出来</em><em id="__mceDel">valine评论弹幕， 需要把</em><em id="__mceDel"><em>代码需要修改一下</em></em></p>
<p class="h2 mb-3"><em><em><em><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829214338972-504287656.jpg" width="500" loading="lazy"></em></em></em></p>
<p class="h2 mb-3"> 看看效果：</p>
<p class="h2 mb-3"><img src="https://img2020.cnblogs.com/blog/857884/202108/857884-20210829214535787-1787540053.png" width="500" loading="lazy"></p>
<p class="h2 mb-3"> </p>
<p>目前主要是功能总结：</p>
<p>已经完成：<br>1、推荐优质文章<br>2、搜索功能<br>3、评论模块<br>4、打赏功能（可以重点测试哈）</p>
<p>待开放的功能：<br>1、页脚统计<br>2、关于部分页面项目替换<br>3、页面样式UI</p>
<p> </p>
<p>-------------------更新中------------------</p>
<p class="h2 mb-3"> </p>
<p> </p><br><br>
来源：https://www.cnblogs.com/pikachuworld/p/15203463.html
頁:
[1]