<?xml version="1.0" encoding="utf-8"?>

<search>

<entry>

<title>快速搭建 Hexo 博客站+部署上线</title>

<link href="/articles/d2db8cb.html"/>

<url>/articles/d2db8cb.html</url>

<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><img width="50" height="50" align='left' src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg"><p><a href="https://hexo.io/zh-cn/">Hexo</a>是基于<code>Node.js</code>构建简洁高效的博客框架。用户可使用 <code>Markdown</code> 编写文章内容，<code>Hexo</code> 使用 <code>Markdown</code>解析文章，几秒内即可利用靓丽的主题生成静态网页。支持丰富的主题与插件，主题用于页面展示效果，插件用于实现博客的特殊功能 如：文章及内容搜索、图片懒加载、一键远程部署等。</p><h1 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h1><ul><li><p>一台电脑</p></li><li><p>勤劳的双手</p></li></ul><h1 id="搭建-Hexo-博客站"><a href="#搭建-Hexo-博客站" class="headerlink" title="搭建 Hexo 博客站"></a>搭建 Hexo 博客站</h1><h2 id="先安装Node-js"><a href="#先安装Node-js" class="headerlink" title="先安装Node.js"></a>先安装Node.js</h2><blockquote><p>因为<code>Hexo</code>是基于<code>Node.js</code>的，所以在安装<code>Hexo</code>之前我们需要安装<code>Node.js</code> </p></blockquote><p>大家可以去<a href="https://nodejs.org/zh-cn">官网</a>下载长期维护版安装使用，因为<code>Hexo</code> 需要<code>Node.js</code> 版本不低于 10.13，建议使用 <code>Node.js</code> 12.0 及以上版本，如果电脑上有低版本的<code>Node.js</code>，非常推荐大家通过<a href="https://github.com/coreybutler/nvm-windows/">nvm</a>工具统一管理。我这里使用的版本是<a href="https://nodejs.org/zh-cn/download/releases">Node.js 12.22.12</a>。</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-nodejs.png"></p><p>下载安装后，按下 <code>Windows + R </code>打开窗口，输入<code>cmd</code>并回车，打开命令提示符，依次输入以下命令查看版本号，能看到版本号的话代表安装成功！</p><figure class="highlight shell"><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">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><p>查询结果和你安装的版本号一致</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-nodejs%E7%89%88%E6%9C%AC%E5%8F%B7.png"></p><h2 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><p>在安装<code>Hexo</code>之前需要先修改一下<code>npm</code>的镜像，使用如下命令</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry http://registry.npm.taobao.org/</span><br></pre></td></tr></table></figure><p>执行如下命令，进行<code>Hexo</code>的全局安装</p><figure class="highlight shell"><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>执行如下命令，进行版本的查看</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo -v</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-hexo%E7%89%88%E6%9C%AC.png"></p><p>出现以上的信息<code>Hexo</code>就安装成功了</p><h2 id="初始化Hexo博客目录"><a href="#初始化Hexo博客目录" class="headerlink" title="初始化Hexo博客目录"></a>初始化Hexo博客目录</h2><p>现在需要建立一个文件夹用来存放你的博客文件，我这里用的<code>D:\Blog_test</code>作为博客目录，现在需要从命令行进入到这个目录</p><div class="tabs" id="进入目录"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#进入目录-1">方法一</button></li><li class="tab"><button type="button" data-href="#进入目录-2">方法二</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="进入目录-1"><p> 依旧是按下<code>Windows + R</code> 打开窗口，输入<code>cmd</code>并回车，打开命令提示符，使用<code>cd</code>进入到我们的博客目录，如果目录不在C盘的在D盘的话，还需要加<code>/d</code>这个参数</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd /d D:\Blog_test</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="进入目录-2"><p>通过此电脑进入到相对应的目录中，点击位置的地方直接，把<code>D:\Blog_test</code>删除键入<code>cmd</code>按<code>Enter</code>键便可以进入到相对应的目录</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-1.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><p>在这个目录的命令行中，输入<code>hexo init</code>初始化你的博客目录，等待几分钟</p><figure class="highlight shell"><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>在博客根目录下我们常常需要用到的命令有</p><table><thead><tr><th align="left">常用命令</th><th align="left">简写</th><th align="left">中文含义</th></tr></thead><tbody><tr><td align="left">hexo server</td><td align="left">hexo s</td><td align="left">本地启动</td></tr><tr><td align="left">hexo generate</td><td align="left">hexo g</td><td align="left">生成静态文件</td></tr><tr><td align="left">hexo deploy</td><td align="left">hexo d</td><td align="left">部署网站</td></tr><tr><td align="left">hexo clean</td><td align="left"></td><td align="left">清除缓存和已经生成的静态文件</td></tr></tbody></table><p>初始化之后我们需要安装相关依赖，并且生成静态文件，依次在博客目录命令行中执行以下命令</p><figure class="highlight shell"><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">npm install</span><br><span class="line">hexo g</span><br></pre></td></tr></table></figure><p>命令执行完成后，进入到你自己建的目录中，我的是<code>D:\Blog_test</code>，可以看见已经初始化生成一些文件了</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-2.png"></p><ul><li><code>node_modules</code>：是项目包含依赖的模块</li><li><code>public</code>：执行<code>hexo g</code>生成静态文件存放的位置</li><li><code>scaffolds</code>：用来存放创建分类、标签和文章的一些模板</li><li><code>source</code>：包含生成网页所需要的文件，其中就有我们花心思写的<code>Markdown</code>文章，里面的<code>_posts</code>文件夹用来存放你的文章（初始化后你会发现已经有一个<code>hello-world.md</code>文件）</li><li><code>themes</code>：用来存放一些主题</li><li><code>_config.yml</code>：<strong>博客的配置文件</strong></li><li><code>_config.landscape.yml</code>：<strong>默认主题<code>landscape</code>的配置文件</strong></li></ul><h2 id="运行Hexo"><a href="#运行Hexo" class="headerlink" title="运行Hexo"></a>运行Hexo</h2><p>在博客目录的命令行中输入<code>hexo s</code>启动博客，在浏览器中打开 <a href="http://localhost:4000/">http://localhost:4000</a> 预览页面效果，默认是4000端口，也可以通过<code>hexo s -p 端口号</code>指定端口启动</p><figure class="highlight shell"><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://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-3.png"></p><p>这样简单的博客就本地启动成功啦！</p><h2 id="简单修改网站信息"><a href="#简单修改网站信息" class="headerlink" title="简单修改网站信息"></a>简单修改网站信息</h2><p>打开博客的的配置文件<code>_config.yml</code>，简单的修改第5行<code># site</code>里面的一些内容即可</p><p>例：</p><figure class="highlight yaml"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">title:</span> <span class="string">TZY</span> <span class="string">の</span> <span class="string">博客</span></span><br><span class="line"><span class="attr">subtitle:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">当然要记录啦</span></span><br><span class="line"><span class="attr">keywords:</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">Resuni</span> <span class="string">Tang</span></span><br><span class="line"><span class="attr">language:</span> <span class="string">zh-CN</span></span><br><span class="line"><span class="attr">timezone:</span> <span class="string">Asia/Shanghai</span></span><br></pre></td></tr></table></figure><p>修改之后按<code>ctrl + c</code>停止项目，然后输入<code>hexo s</code>重启项目，页面就发生了对应的变化</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-4.png"></p><p>附上：<a href="https://hexo.io/zh-cn/docs/configuration.html">_config.yml官方文档</a></p><h1 id="部署上线"><a href="#部署上线" class="headerlink" title="部署上线"></a>部署上线</h1><p>将<code>Hexo</code>博客部署到<code>Github</code>上让他人能访问你的博客</p><blockquote><p>什么是<code>Github</code>？</p><p><a href="https://github.com/">Github</a>是一个面向开源及私有软件项目的托管平台，因为只支持<code>Git</code>作为唯一的版本库格式进行托管，故名<code>GitHub</code>。简单来说，<code>GitHub</code>是一个代码托管云服务网站，帮助开发者存储和管理其项目源代码，且能够追踪、记录并控制用户对其代码的修改。甚至你可以简单粗暴的把它当作一个网盘，用来存储任何东西。</p></blockquote><h2 id="注册Github"><a href="#注册Github" class="headerlink" title="注册Github"></a>注册Github</h2><p>进入<code>Github</code>的<a href="https://github.com/">官网</a>，右上角<code>Sign up</code>注册并登入，记住用户名和注册邮箱</p><h2 id="安装Git"><a href="#安装Git" class="headerlink" title="安装Git"></a>安装Git</h2><p>直接从<code>Git</code>的<a href="https://git-scm.com/downloads">官网</a>下载安装程序，然后安装默认选项安装即可，安装完成之后，在桌面右击出现<code>Git Bash Here</code>，如下图所示说明安装成功！（失败的话可以参照<a href="https://github.com/CatOneTwo/GitHub-Tutorial/issues/3">Git安装教程</a>）</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-5.png"></p><p>点击<code>Git Bash Here</code>，之后进行将<code>Github</code>的用户名和邮箱配置到<code>Git</code>中</p><p>在出现的页面依次输入以下命令</p><figure class="highlight bash"><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">git config --global user.name <span class="string">&quot;你的用户名&quot;</span></span><br><span class="line">git config --global user.email <span class="string">&quot;注册邮箱&quot;</span></span><br></pre></td></tr></table></figure><p>配置完成后可以通过以下命令查看是否配置正确</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">//使用这行命令查看全局配置</span><br><span class="line">git config --global --list</span><br><span class="line">//使用这行命令查看全部配置</span><br><span class="line">git config --list</span><br></pre></td></tr></table></figure><p>如果发现用户名或者邮箱填写错误，可以通过以下命令修改</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">//使用这行命令修改你的用户名</span><br><span class="line">git config --global --replace-all user.name <span class="string">&quot;你的用户名&quot;</span></span><br><span class="line">//使用这行命令修改你的邮箱</span><br><span class="line">git config --global --replace-all user.email <span class="string">&quot;你的注册邮箱&quot;</span></span><br></pre></td></tr></table></figure><h2 id="创建Github仓库"><a href="#创建Github仓库" class="headerlink" title="创建Github仓库"></a>创建Github仓库</h2><p>登入<code>Github</code>之后，在首页点击右上角的加号，点击<code>New repository</code>，创建新的仓库</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-6.png"></p><p>仓库名命名规则：<code>你的用户名.github.io</code>，必须是<strong>用户名</strong>加<code>.github.io</code>后缀！！！例如我的用户名是<code>TResuni</code>，那么我的命名就是<code>TResuni.github.io</code></p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-7.png"></p><p>创建完之后进入仓库，可以看到我们仓库的<code>HTTPS</code>地址，复制这个地址，后面会使用<code>Git</code>通过这个地址将我们的代码推送到这个地方，下面截图是我自己的仓库，新建的仓库是没有内容的</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-8.png"></p><h2 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h2><blockquote><p>回到我们的博客目录，比如上面我的博客目录是<code>D:\Blog_test</code>，鼠标右击，点击<code>Git Bash Here</code>，后面的操作都在这里</p></blockquote><p>推送之前我们需要先安装<a href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a></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><p>然后在博客目录中，修改博客的配置文件<code>_config.yml</code>，如果有这个配置直接修改就行，没有的话可以直接复制添加改配置，<code>repo</code>替换成上面你自己复制的链接</p><figure class="highlight yaml"><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"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">https://github.com/TResuni/TResuni.github.io.git</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure><p>修改保存然后退出，回到上面的<code>Git Bash Here</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></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-9.png"></p><p>选择<code>Sign in with your browser</code></p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-10.png"></p><p>点击<code>Authorize GitCredentialManager</code></p><p>耐心等待一会即可！</p><details class="toggle" ><summary class="toggle-button" style="">有梯子的点开</summary><div class="toggle-content"><p>众所周知，<code>Github</code>对国内用户不友好，如果你有梯子的话，那么<code>Git</code>推送代码将会更顺利啦</p><p>在<code>Git Bash Here</code>界面上，输入以下命令，<code>socks5</code>和<code>http</code>代理选一个就行，因人而异，我使用<code>http</code>代理可以，使用<code>socks5</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><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 以下使用socks5代理</span></span><br><span class="line">git config --global http.proxy socks5://127.0.0.1:1086</span><br><span class="line">git config --global https.proxy socks5://127.0.0.1:1086</span><br><span class="line"> </span><br><span class="line"><span class="comment"># 以下使用http代理</span></span><br><span class="line">git config --global http.proxy http://127.0.0.1:1087</span><br><span class="line">git config --global https.proxy https://127.0.0.1:1087</span><br><span class="line"> </span><br><span class="line"><span class="comment"># 取消代理</span></span><br><span class="line">git config --global --<span class="built_in">unset</span> http.proxy</span><br><span class="line">git config --global --<span class="built_in">unset</span> https.proxy</span><br></pre></td></tr></table></figure><p>后面的地址填写电脑设置中的代理</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-12.png"></p><p>经过以上的配置你会发现代码推送出错的概率大大降低</p></div></details><p>经过上面的步骤，我们的博客已经部署到Github上去啦，只需要输入我们的仓库名就可以访问我们的博客啦，或者可以在仓库中的设置，找到<code>Pages</code>，点击即可</p><p><img src="https://cdn.jsdelivr.net/gh/TResuni/blog_Image@main/img/20230521-11.png"></p><p>现在可以将你的博客地址发给你的小伙伴们啦</p><hr>]]></content>

<categories>

<category> Hexo建站指南 </category>

</categories>

<tags>

<tag> Hexo </tag>

</tags>

</entry>

</search>