Github + Hexo 搭建个人博客超详细教程
<h2 id="本文目录-generated-with-doctoc"><strong>本文目录</strong> <em>generated with DocToc</em></h2><ul>
<li><strong>网站搭建</strong>
<ul>
<li><strong>本文目录</strong></li>
<li><strong>1.安装node.js</strong></li>
<li><strong>2.添加国内镜像</strong></li>
<li><strong>3.安装Git</strong></li>
<li><strong>4.注册Github账号</strong></li>
<li><strong>5.创建git仓库</strong></li>
<li><strong>6.安装Hexo</strong></li>
<li><strong>7.配置本地hexo</strong></li>
<li><strong>8.连接Github与本地</strong></li>
<li><strong>9.本地连接Github</strong></li>
<li><strong>10.写文章、发布文章</strong></li>
<li><strong>11.MarkDown文章编辑器说明</strong></li>
<li><strong>12.更换自己喜欢的Hexo主题</strong></li>
<li><strong>结语</strong></li>
</ul>
</li>
</ul>
<h2 id="1安装nodejs"><strong>1.安装node.js</strong></h2>
<h3 id="了解一下什么是nodejs">了解一下什么是Node.js：</h3>
<blockquote>
<p>Node.js就是一个用于创建服务器端应用程序的运行系统，它可以轻松构建网络或其他事件驱动的应用程序服务器。</p>
</blockquote>
<h3 id="nodejs下载地址">node.js下载地址</h3>
<h3 id="需要用到的命令">需要用到的命令：</h3>
<pre><code>git --version
node -v
npm -v
</code></pre>
<blockquote>
<p>检验是否安装成功：按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。</p>
</blockquote>
<h2 id="2添加国内镜像"><strong>2.添加国内镜像</strong></h2>
<h3 id="这里我们使用淘宝云镜像进行加速按winr打开命令提示符输入">这里我们使用淘宝云镜像进行加速，按Win+R打开命令提示符输入：</h3>
<pre><code>npm config set registry https://registry.npm.taobao.org
</code></pre>
<h3 id="httpnpmtaobaoorg和-httpregistrynpmtaobaoorg-将在-20220630-号正式下线和停止-dns-解析">http://npm.taobao.org和 http://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。</h3>
<p>新域名为 npmmirror.com, 相关服务域名切换规则请参考：</p>
<pre><code>http://npm.taobao.org => http://npmmirror.com
http://registry.npm.taobao.org => http://registry.npmmirror.com
</code></pre>
<h3 id="修改npm至新的淘宝镜像源">修改npm至新的淘宝镜像源：</h3>
<pre><code>npm config set registry http://registry.npmmirror.com
</code></pre>
<h3 id="需要解除镜像并恢复到官方源">需要解除镜像并恢复到官方源：</h3>
<pre><code>npm config set registry https://registry.npmjs.org
</code></pre>
<h3 id="查看npm源地址有没有换成功">查看npm源地址有没有换成功：</h3>
<pre><code>npm config get registry
</code></pre>
<h2 id="3安装git"><strong>3.安装Git</strong></h2>
<blockquote>
<p>Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理，帮助我们把本地网页上传到Github。</p>
</blockquote>
<h3 id="点击进入git下载相应版本默认安装即可">点击进入Git下载相应版本，默认安装即可。</h3>
<h3 id="git官网下载地址">Git官网下载地址</h3>
<h3 id="git国内镜像下载地址">Git国内镜像下载地址</h3>
<h3 id="检验是否安装成功安装完成后在命令提示符中输入git---version验证是否安装成功">检验是否安装成功：安装完成后在命令提示符中输入git --version验证是否安装成功</h3>
<pre><code>git --version
</code></pre>
<h2 id="4注册github账号"><strong>4.注册Github账号</strong></h2>
<p>Github作为全球最大的开源社区，相信朋友们都已经有了吧，如果没有，点击Github进入Github官网点击 Sign Up 注册账户。</p>
<h2 id="5创建git仓库"><strong>5.创建git仓库</strong></h2>
<p>登录Github创建一个仓库<br>
如下图所示，输入自己的项目名字，后面一定要加.http://github.io后缀，README初始化也要勾上。名称一定要和你的Github名字完全一样，比如你github名字叫 A，那么仓库名字一定要是 http://A.github.io。</p>
<h2 id="6安装hexo"><strong>6.安装Hexo</strong></h2>
<blockquote>
<p>Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku，是搭建博客的首选框架。</p>
</blockquote>
<h3 id="选择一个磁盘新建一个文件夹用来存放博客文件比如我的cpanakot-blog在该文件夹下右键单击鼠标点击git-bash-here输入以下npm命令即可安装">选择一个磁盘，新建一个文件夹用来存放博客文件。比如我的（C/panakot Blog），在该文件夹下右键单击鼠标，点击Git Bash Here，输入以下npm命令即可安装</h3>
<pre><code>npm install hexo-cli -g
</code></pre>
<h3 id="输入hexo--v即可检验是否安装成功我这里就不演示了">输入hexo -v即可检验是否安装成功，我这里就不演示了。</h3>
<pre><code>hexo -v
</code></pre>
<h2 id="7配置本地hexo"><strong>7.配置本地hexo</strong></h2>
<h3 id="还是在刚才新建的文件夹下再新建一个hexo文件夹比如我的cpanakot-bloghexo在hexo文件夹下右键单击鼠标点击-git-bash-here依次输入以下-npm-命令即可初始化">还是在刚才新建的文件夹下再新建一个Hexo文件夹，比如我的（C/panakot Blog/Hexo），在Hexo文件夹下右键单击鼠标，点击 Git Bash Here，依次输入以下 npm 命令即可初始化。</h3>
<pre><code>hexo init
npm install
</code></pre>
<h3 id="初始化成功生成的文件">初始化成功生成的文件：</h3>
<h3 id="接着我们输入hexo-g生成静态网页然后输入hexo-s打开本地服务器然后浏览器打开httplocalhost4000就可以预览我们的博客啦如图">接着我们输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以预览我们的博客啦，如图：</h3>
<p>显示以下信息说明操作正确：</p>
<pre><code>INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
</code></pre>
<h3 id="按ctrlc关闭本地服务器">按ctrl+c关闭本地服务器。</h3>
<h3 id="我们以后常用到的hexo命令"><strong>我们以后常用到的Hexo命令：</strong></h3>
<ul>
<li>hexo s等价于 hexo server #Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。</li>
<li>hexo g 等价于 hexo generate #生成静态网页 (执行 $ hexo g 后会在站点根目录下生成public>文件夹, hexo会将"<font /blog/source/" 下面的.md后缀的文件编译为.html后缀的文件,存放在"/blog/public/ " 路径下)</li>
<li>hexo d 等价于 hexo deploy #将本地数据部署到远端服务器(如github)</li>
<li>hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹</li>
</ul>
<h2 id="8连接github与本地"><strong>8.连接Github与本地</strong></h2>
<h3 id="1生成密钥"><strong>(1)生成密钥</strong></h3>
<h3 id="右键单击鼠标点击-git-bash-here输入以下命令">右键单击鼠标，点击 Git Bash Here输入以下命令：</h3>
<pre><code>git config --global user.name "Name"
git config --global user.email "Email"
</code></pre>
<h3 id="name和email是我们注册github时的用户名和邮箱"><strong>Name和Email是我们注册Github时的用户名和邮箱。</strong></h3>
<h3 id="然后生成密钥">然后生成密钥：</h3>
<pre><code>ssh-keygen -t rsa -C "Email"
</code></pre>
<h3 id="email是我们注册github时的邮箱"><strong>Email是我们注册Github时的邮箱</strong></h3>
<h3 id="然后会出现">然后会出现：</h3>
<pre><code>Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到这里可以直接回车将密钥按默认文件进行存储
</code></pre>
<h3 id="回车之后">回车之后：</h3>
<pre><code>Enter passphrase (empty for no passphrase):
//这里是要你输入密码，其实不需要输什么密码，直接回车就行
Enter same passphrase again:
</code></pre>
<h3 id="接下来会有">接下来会有：</h3>
<pre><code>Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
</code></pre>
<h3 id="这里是各种字母数字组成的字符串结尾是你的邮箱">这里是各种字母数字组成的字符串，结尾是你的邮箱</h3>
<pre><code>The key's randomart image is:
</code></pre>
<h3 id="这里也是各种字母数字符号组成的字符串">这里也是各种字母数字符号组成的字符串</h3>
<h3 id="现在密钥已经生成一般存放在cusersyousshid_rsapub我们运行下面的命令将密钥复制为粘贴板">现在密钥已经生成，一般存放在（/c/Users/you/.ssh/id_rsa.pub.），我们运行下面的命令将密钥复制为粘贴板：</h3>
<pre><code>clip < ~/.ssh/id_rsa.pub
</code></pre>
<h3 id="2连接github"><strong>(2)连接Github</strong></h3>
<h3 id="在github头像下面点击settings再点击ssh-and-gpg-keys新建一个ssh名字任意">在Github头像下面点击Settings，再点击SSH and GPG keys，新建一个SSH，名字任意。</h3>
<h3 id="然后将刚才复制的密钥添加就可以了像这样">然后将刚才复制的密钥添加就可以了，像这样：</h3>
<h2 id="9本地连接github"><strong>9.本地连接Github</strong></h2>
<h3 id="右键单击鼠标点击git-bash-here输入以下命令如果如下图所示出现你的用户名那就成功了">右键单击鼠标，点击Git Bash Here输入以下命令，如果如下图所示，出现你的用户名，那就成功了</h3>
<pre><code>ssh -T git@github.com
//注意不要做任何修改
</code></pre>
<h3 id="用记事本打开博客根目录下的_configyml文件这是博客的配置文件我们需要修改一下才能连接github">用记事本打开博客根目录下的_config.yml文件，这是博客的配置文件，我们需要修改一下才能连接Github。</h3>
<h3 id="修改最后一行的配置">修改最后一行的配置：</h3>
<pre><code> deploy:
type: git
repository: git@github.com:panakot/panakot.github.io.git
branch: master
</code></pre>
<h3 id="切记">切记：</h3>
<ul>
<li>repository修改为你自己的github项目地址。</li>
<li>每一个冒号后面都有一个空格。</li>
</ul>
<h2 id="10写文章发布文章"><strong>10.写文章、发布文章</strong></h2>
<h3 id="首先在博客根目录下右键打开git-bash-here输入以下命令安装一个扩展">首先在博客根目录下右键打开Git Bash Here输入以下命令，安装一个扩展.</h3>
<pre><code>npm i hexo-deployer-git
</code></pre>
<h3 id="然后输入下面的命令新建一篇文章">然后输入下面的命令，新建一篇文章。</h3>
<pre><code>hexo new post "article title"
</code></pre>
<h3 id="然后打开cpanakot-bloghexosource_posts的目录可以发现下面多了一个文件夹和一个md文件一个用来存放你的图片等数据另一个就是你的文章文件啦">然后打开C:\panakot Blog\Hexo\source_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。</h3>
<h3 id="编写完markdown文件后根目录下右键打开git-bash-here输入hexo-g生成静态网页然后输入hexo-s可以本地预览效果最后输入hexo-d上传到github上">编写完markdown文件后，根目录下右键打开Git Bash Here输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。</h3>
<h3 id="你的博客地址https你的用户名githubio比如我的是赵晓龙的博客现在每个人都可以通过此链接访问你的博客">你的博客地址：https://你的用户名.github.io，比如我的是：赵晓龙的博客，现在每个人都可以通过此链接访问你的博客</h3>
<h2 id="11markdown文章编辑器说明"><strong>11.MarkDown文章编辑器说明</strong></h2>
<blockquote>
<p>前面我们提到了使用MarkDown编辑我们的博客文章。 Markdown 是2004 年由John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后将写好的文（.md文件）保存到\Hexo\source_posts 文件夹下即可。</p>
</blockquote>
<h3 id="vs-code也算是比较好用">VS Code也算是比较好用</h3>
<h2 id="12更换自己喜欢的hexo主题"><strong>12.更换自己喜欢的Hexo主题</strong></h2>
<h3 id="点击hexo主题进入主题专栏可以看到很多hexo主题">点击Hexo主题进入主题专栏可以看到很多Hexo主题：</h3>
<h2 id="结语"><strong>结语</strong></h2>
<h3 id="一顿操作下来初学者可能会觉得困难毕竟很多东西都是第一次接触当初我也尝试了好几次才成功不要放弃弄错了就删掉重新来过当你把博客搭建出来会觉得受益良多的">一顿操作下来，初学者可能会觉得困难，毕竟很多东西都是第一次接触，当初我也尝试了好几次才成功，不要放弃，弄错了就删掉重新来过，当你把博客搭建出来会觉得受益良多的。</h3>
<h3 id="文章中难免有错误的地方有大佬发现了欢迎给我指正有的地方解释不够详细可以百度一下看看细节文章中的引用以及参考资料涉及侵权请联系我删除">文章中难免有错误的地方，有大佬发现了欢迎给我指正！有的地方解释不够详细，可以百度一下看看细节，文章中的引用以及参考资料涉及侵权请联系我删除！</h3><br><br>
来源：https://www.cnblogs.com/xiyan122/p/16609887.html
頁:
[1]