search.xml

<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title>0 基础搭建博客教程（一）</title>
      <link href="/posts/2f36eedc/"/>
      <url>/posts/2f36eedc/</url>
      
        <content type="html"><![CDATA[<div class="note danger flat"><p>请注意，本文任何内容都只适用于 Windows 10 系统，其他系统不适用。</p></div><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><h2 id="搭建方式"><a href="#搭建方式" class="headerlink" title="搭建方式"></a>搭建方式</h2><p>使用 GitHub Pages 来搭建 Hexo 静态博客网站，其优点是完全免费，虽然搭建过程中有点折腾，但搭建完成后基本不用担心维护的事，本文就详细介绍下如何使用 Hexo + GitHub 搭建免费个人博客网站的教程。</p><h2 id="什么是-GitHub-Pages？"><a href="#什么是-GitHub-Pages？" class="headerlink" title="什么是 GitHub Pages？"></a>什么是 GitHub Pages？</h2><p>GitHub Pages 是 GitHub 提供的一项服务，允许用户免费托管静态网站或个人项目页面。它基于 Git 版本控制系统，使得用户能够直接从代码仓库中生成和发布网页内容。通过 GitHub Pages，用户可以将自己的项目展示给他人，无需自己购买服务器或域名，非常适合个人网站、项目文档、博客等使用。</p><p>——来自 ChatGPT</p><p>具体可看官网介绍，可用翻译插件看一下，打不开可以用steam++，具体使用看下文：<a href="https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages">About GitHub Pages</a></p><h2 id="什么是-Hexo？"><a href="#什么是-Hexo？" class="headerlink" title="什么是 Hexo？"></a>什么是 Hexo？</h2><p><strong>Hexo</strong> 是一个基于 Node.js 的博客框架，支持 Markdown、一键部署和插件扩展。Hexo 提供了 406 个美观、强大、可定制的主题，让你轻松创建自己的博客。</p><p>——来自官网介绍</p><h1 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h1><h2 id="安装-Node-js"><a href="#安装-Node-js" class="headerlink" title="安装 Node.js"></a>安装 Node.js</h2><p><a href="https://nodejs.org/zh-cn/download/prebuilt-installer/current">点我</a>下载 Node.js，如图：</p><p><img src="https://2176608.us.kg/picture/node.js.png" alt="Node.js下载页面"></p><p>下载完成后打开，然后一路点 <code>next</code>，最后点 <code>Finish</code>。</p><h2 id="安装-Git"><a href="#安装-Git" class="headerlink" title="安装 Git"></a>安装 Git</h2><p><a href="https://git-scm.com/">点我</a>下载 Git，下载速度可能特别慢，耐心等待。如图：</p><p><img src="https://2176608.us.kg/picture/git.png" alt="Git 下载界面"></p><p>安装过程和 Node.js 一样，此处不再重复。</p><h1 id="创建博客"><a href="#创建博客" class="headerlink" title="创建博客"></a>创建博客</h1><h2 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h2><p>新建<strong>存放博客的文件夹</strong>，然后在此文件夹中右键，点击<code>Open Git Bash here</code>，意为打开 Bash ，如图：</p><p><img src="https://2176608.us.kg/picture/bash.png"></p><div class="note warning flat"><p>请注意，除此以外，下文中所有<code>运行命令的方法</code>都是这样操作的，除了判断成功的方式。<br>该方法只在这里介绍一次，以后不再重复。</p></div><p>然后在此页面中输入以下命令以安装Hexo：（直接复制粘贴，粘贴时在此窗口点击右键，点击 <code>Paste</code>）</p><p>具体操作如下图：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure><p><img src="https://2176608.us.kg/picture/bash1.png" alt="1"></p><p><img src="https://2176608.us.kg/picture/paste.png" alt="2"></p><p>然后回车（点击键盘上的Enter）运行即可。如出现错误，请自行上网查询查找解决方法（可以去CSDN搜，那里比较靠谱），每个人的问题不一样。</p><p>运行后出现<code>类似于</code>这样的页面就安装成功了：</p><p><img src="https://2176608.us.kg/picture/success.png"></p><h2 id="配置淘宝镜像源"><a href="#配置淘宝镜像源" class="headerlink" title="配置淘宝镜像源"></a>配置淘宝镜像源</h2><p>由于众所周知的原因，使用 npm 访问一些资源时有时会遇到拒绝访问的情况。要解决这个问题，我们可以使用国内的淘宝镜像源。</p><p>直接运行此命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npmjs.org/</span><br></pre></td></tr></table></figure><h2 id="Hexo-初始化"><a href="#Hexo-初始化" class="headerlink" title="Hexo 初始化"></a>Hexo 初始化</h2><p>继续在此窗口操作，运行这条命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure><p>若运行结果的每一行均以’INFO’开头，则表明初始化完成。</p><h2 id="安装-npm"><a href="#安装-npm" class="headerlink" title="安装 npm"></a>安装 npm</h2><p>继续在此窗口操作，运行这条命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure><h2 id="博客预览"><a href="#博客预览" class="headerlink" title="博客预览"></a>博客预览</h2><p>最后，运行这条命令，如果像下图一样没有报错，就可以在本地访问你的博客了，在浏览器输入<code>http://localhost4000/</code>以预览博客，按 Ctrl + C 停止预览：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure><p><img src="https://2176608.us.kg/picture/finally.png"></p><p>可能你会感觉这个博客太简陋了，别急，一步一步来。</p><h1 id="博客部署"><a href="#博客部署" class="headerlink" title="博客部署"></a>博客部署</h1><p>我们先把博客部署到 Github上，之后再讲美化。</p><p>刚才你访问的博客只能在本地访问自己看到，还无法联网让其他人看到，现在我们就把博客部署（可以理解为上传）到 GitHub 上让其他人看到。</p><h2 id="准备工作-1"><a href="#准备工作-1" class="headerlink" title="准备工作"></a>准备工作</h2><h3 id="下载-Watt-Toolkit（原名-Steam-）"><a href="#下载-Watt-Toolkit（原名-Steam-）" class="headerlink" title="下载 Watt Toolkit（原名 Steam++ ）"></a>下载 Watt Toolkit（原名 Steam++ ）</h3><div class="note info flat"><p>能访问GitHub的可忽略此小节，不能访问的往下看。</p></div><p>既然搭建方式是使用 Github Pages 来搭建，那就必须能访问 Github，但是，部分地区可能会遇到不能访问 Github 的情况，本节的撰写就是为了帮助不能访问 Github 的人能正常访问 Github。</p><p><a href="https://steampp.net/">点我</a>去官网下载，如有问题可<a href="https://steampp.net/faq">点我</a>去官网查看常见问题及解决方案。</p><p>下载安装完成后，打开它，点击左侧第二个闪电图标“网络加速”选项，滚轮往下滑找到并勾选 GitHub 选项，点击右上角 “<code>一键加速</code>”，就可以访问 GitHub 了。</p><p>如图：</p><p><img src="https://2176608.us.kg/picture/steam.png" alt="Steam++ 页面"></p><h3 id="安装hexo-deployer-git插件"><a href="#安装hexo-deployer-git插件" class="headerlink" title="安装hexo-deployer-git插件"></a>安装<code>hexo-deployer-git</code>插件</h3><div class="note danger flat"><p>不要忽略此小节！！！</p></div><p>这样才可以用命令把博客部署到 Github 上。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><h2 id="注册-Github-账户"><a href="#注册-Github-账户" class="headerlink" title="注册 Github 账户"></a>注册 Github 账户</h2><p>不能访问 GitHub 的，和本文2.1一样，并且在2.1的基础上多打一个“国外验证码平台”的勾，因为在注册 Github 时，需要完成人机验证，而人机验证有时可能加载不出来，所以要勾上这个。</p><p>进入 Github 页面，点击右上角的<code>Sign-up</code></p><p><img src="https://2176608.us.kg/picture/github.png" alt="Github 注册"></p><p>然后根据网页指引，填写你的邮箱，设置密码，剩下的怎么填都无所谓，但<code>有一点要注意，你的 Github 用户名直接与你的域名挂钩！</code>当博客成功部署到 Github上时，会给你一个“<code>XXXX.github.io</code>“域名，其中的XXXX就是你的 Github 用户名！</p><h2 id="创建“仓库”"><a href="#创建“仓库”" class="headerlink" title="创建“仓库”"></a>创建“仓库”</h2><p>登录后，点击左边的绿色按钮<code>create repository</code>，如果你已经有仓库了，就点绿色按钮<code>new</code></p><p>这里要注意，<code>仓库名字（Repository name）和用户名（Owner）必须一摸一样！且必须写成XXX.github.io样式，类型必须选择Public</code>（我这里已经建好了，才会出现报错）如下图：</p><p><img src="https://2176608.us.kg/picture/signup.png" alt="创建“仓库”注意事项"></p><p>完成后在<code>页面最低端</code>点击绿色按钮<code>Create repository</code>，这样仓库就建好了。</p><h2 id="将-Github-仓库和本地文件关联起来"><a href="#将-Github-仓库和本地文件关联起来" class="headerlink" title="将 Github 仓库和本地文件关联起来"></a>将 Github 仓库和本地文件关联起来</h2><p>完成后，点击按钮<code>ssh</code>，复制 SSH ：</p><p><img src="https://2176608.us.kg/picture/5565.png" alt="有点差别，但是都一样。"></p><p>按照下列格式粘贴到博客站点配置文件<code>你的博客文件夹/_config.yml</code>中，具体格式为：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  <span class="built_in">type</span>: git</span><br><span class="line">  repo: your ssh</span><br><span class="line">  branch: main</span><br></pre></td></tr></table></figure><div class="note warning flat"><p>请注意，要把 repo 后面的“your ssh”更改为你刚才复制的 ssh！！！</p></div><p><img src="https://2176608.us.kg/picture/yuanban.png" alt="原版"></p><p><img src="https://2176608.us.kg/picture/gai.png" alt="直接改"></p><p>接下来，开始建立联系，运行下列命令，<code>一个一个来执行</code>：</p><div class="note warning flat"><p>请注意，要把下面的 “<code>your Github name</code>” 和 “<code>your Github email</code>“ （不包括引号）分别改成你自己的 Github 用户名和注册 Github 时所用的邮箱！！！</p></div><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&quot;your Github name&quot;</span></span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.email <span class="string">&quot;your Github email&quot;</span></span><br></pre></td></tr></table></figure><h3 id="创建-SSH"><a href="#创建-SSH" class="headerlink" title="创建 SSH"></a>创建 SSH</h3><p>还有个问题，虽然这样可以把博客部署到 Github 上了，但是每次部署都需要输入你的 <code>GitHub 账户的</code>密码，否则就不能上传。想解决这个问题，就创建 SSH（别问这是什么，照做就行）。</p><p>新建 <code>SSH key</code>，<code>在cmd中</code>输入如下命令，<code>注意大小写</code>：</p><div class="note warning flat"><p>请注意，要把下面的 “your email” （不包括引号）改成你注册 Github 时所用的邮箱！！！</p></div><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh<span class="literal">-keygen</span> <span class="literal">-t</span> rsa <span class="literal">-C</span> <span class="string">&quot;your Email&quot;</span></span><br></pre></td></tr></table></figure><p>然后出现：</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Generating public/private rsa key pair.</span><br><span class="line">Enter file <span class="keyword">in</span> which to save the key (/c/Users/电脑名/.ssh/id_rsa):</span><br></pre></td></tr></table></figure><p><code>这一步告诉你生成的 SSH 在哪里，下文中会用到</code>，直接回车即可。</p><p>然后出现：</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Enter passphrase (empty <span class="keyword">for</span> no passphrase):</span><br><span class="line">Enter same passphrase again:</span><br></pre></td></tr></table></figure><p>这一步是要求你设置密码，这个密码会在部署博客到 Github 时（运行hexo d时）使用，可以直接回车，意为不设置密码。</p><p>然后出现：</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">Your identification has been saved <span class="keyword">in</span> /c/Users/电脑名/.ssh/id_rsa.</span><br><span class="line">Your public key has been saved <span class="keyword">in</span> /c/Users/电脑名/.ssh/id_rsa.pub.</span><br><span class="line">The key fingerprint is:</span><br><span class="line"><span class="number">65</span>:<span class="number">69</span>:······<span class="number">02</span>:<span class="number">4</span>b emailname@email.com</span><br><span class="line">The key<span class="string">&#x27;s randomart image is:</span></span><br><span class="line"><span class="string">+--[ RSA 2048]----+</span></span><br><span class="line"><span class="string">|                 |</span></span><br><span class="line"><span class="string">|       .   o .   |</span></span><br><span class="line"><span class="string">|    . o o = o    |</span></span><br><span class="line"><span class="string">|   . o * = o     |</span></span><br><span class="line"><span class="string">|  E  o + o .     |</span></span><br><span class="line"><span class="string">| . o.   . .      |</span></span><br><span class="line"><span class="string">|     ..          |</span></span><br><span class="line"><span class="string">+-----------------+</span></span><br></pre></td></tr></table></figure><p>意为密钥成功生成，关闭窗口。</p><h3 id="在-Github-上添加-SSH-key"><a href="#在-Github-上添加-SSH-key" class="headerlink" title="在 Github 上添加 SSH key"></a>在 Github 上添加 SSH key</h3><p>打开本地文件：<code>id_rsa.pub</code>（位置已在“创建 SSH”小节中介绍），直接打开复制。</p><p>然后登录 GitHub，点击<code>右上角的头像</code>——<code>Settings</code>——<code>SSH and GPG keys</code>，具体流程见下图：</p><p><img src="https://2176608.us.kg/picture/touxiang.png" alt="1"></p><p><img src="https://2176608.us.kg/picture/settings.png" alt="2"></p><p><img src="https://2176608.us.kg/picture/createssh.png" alt="3"></p><p><img src="https://2176608.us.kg/picture/newsshkey.png" alt="4"></p><p>将刚才复制的内容粘贴在<code>key文本框</code>里，title可以不填。</p><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><p><strong>在 cmd</strong> 运行此命令：</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh <span class="literal">-T</span> git@github.com</span><br></pre></td></tr></table></figure><p>如果提示：</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Are you sure you want to <span class="keyword">continue</span> connecting (yes/no)?</span><br></pre></td></tr></table></figure><p>输入 yes 并回车。</p><p>像下图这样即为成功：</p><p><img src="https://2176608.us.kg/picture/ceshi.png"></p><h2 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h2><p>然后就可以部署你的博客到 github 了，在 bash 运行此命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo cl &amp;&amp; hexo g &amp;&amp; hexo d</span><br></pre></td></tr></table></figure><p>类似于图中这样的即为成功：</p><p><img src="https://2176608.us.kg/picture/hexod.png"></p><p>至此恭喜你，你已经有了一个简单的博客！接下来我将会介绍如何美化你自己的博客。</p><p>至此第一章结束，有什么问题也可以在评论区留言。当然，最好还是先上网查询解决方法，因为这是解决问题最快的方式，如果本文哪些地方有问题，欢迎指出。</p>]]></content>
      
      
      <categories>
          
          <category> 博客搭建教程 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>