【详细教程hexo博客搭建】1、从零开始搭建一个能用的博客

妖狐艹你老母 2024-03-26 23:42 68阅读 0赞

### 1、开始 ###

### 2.环境与工具准备 ###

**本教程主要面对的是Windows用户**

*  操作系统：Windows10
 *  Node
 *  Git
 *  Hexo
 *  文本编辑器(强烈推荐VSCODE)
 *  GitHub 帐号
 *  一个域名（强烈推荐买个域名）
 *  云服务器（可选）

[![image-20221027113923949][]][image-20221027113923949 1]

### 3.Node的安装 ###

1.  打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题。下载地址：[Download | Node.js][Download _ Node.js]  
    我个人的版本是 12.19.0，目前版本已经更新到19.0.0，按照个人经验，可以选个低一些的版本，可以和我的一样，否则后面会出现各种不兼容的问题！我之前就是安装16的，系统无法识别，如果大家遇到问题建议选个低版本的！历史版本下载页面：[Previous Releases | Node.js][Previous Releases _ Node.js]
    
    [![image-20221027173738226][]][image-20221027173738226 1]
2.  下载后安装，安装的目录可以使用默认目录【C:/Program Files/nodejs/】，也可以自定义路径。  
    这个环境路径切换坑也很多，如果大家C盘空间足够可以直接装C盘，如果想切换其他盘或者把环境遍历切换到自定义路径也可以，具体教程百度(不过坑比较多就是了)!
3.  安装完成后，检查是否安装成功。在键盘按下win + R键，输入CMD，然后回车，打开CMD窗口，执行node -v命令，看到版本信息，则说明安装成功。
4.  修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成淘宝镜像。打开CMD窗口，运行如下命令:
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>npm config set registry https://registry.npm.taobao.org
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>

### 4.安装Hexo ###

1.  在`Git BASH`输入如下命令安装
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>npm install -g hexo-cli
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
2.  安装完后输入hexo -v验证是否安装成功。

[![image-20221027173525181][]][image-20221027173525181 1]

### 5.Github注册与创建仓库 ###

1.  进入官网 [GitHub: Let’s build from here · GitHub][GitHub_ Let_s build from here _ GitHub]
    
    [![Github注册][Github]][Github_Github]
2.  点击右上角的 Sign up(注册)
    
    [![Github注册][Github 1]][Github_Github 1]
3.  填写自己的邮箱、密码、用户名等信息，然后用邮箱验证即可完成。
4.  注册完成后，点击右上角的`+`按钮，选择`New repository`，创建一个`<用户名>.github.io`的仓库。

[![image-20221027110619071][]][image-20221027110619071 1]

*  仓库的格式必须为：`<用户名>.github.io` (注意：前缀必须为用户名，不要等后面404了再来为什么！！！)
 *  Description：为描述仓库（选填）
 *  勾选 Initialize this repository with a README 初始化一个 [README.md][] 文件
 *  点击 Creat repository 进行创建

[![image-20221027111641909][]][image-20221027111641909 1]

### 6.Git安装 ###

1.  进入官网：[Git - Downloads][] ，由于官网下载太慢可以通过淘宝的开源镜像下载 网址：[CNPM Binaries Mirror][] ，下载版本更具自己的需求选择即可。
    
    [![image-20221027111755697][]][image-20221027111755697 1]
2.  下载后傻瓜式安装Git即可，安装的目录可以使用默认目录【C:/Program Files/Git】，也可以自定义路径。
3.  点击电脑左下角开始即可看见`Git Bash`。

[![Git Bash][]][Git Bash 1]

*  `Git CMD` 是windows 命令行的指令风格
 *  `Git Bash` 是linux系统的指令风格（建议使用）
 *  `Git GUI`是图形化界面（新手学习不建议使用）

1.  常用命令
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    2
    3
    </pre> </td> 
       <td> <pre>git config -l  //查看所有配置
    git config --system --list //查看系统配置
    git config --global --list //查看用户（全局）配置
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
2.  配置用户名和邮箱
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    2
    </pre> </td> 
       <td> <pre>git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
3.  通过`git config -l` 检查是否配置成功，至此git安装及配置全部完成。
    
    [![image-20221027112049822][]][image-20221027112049822 1]

### 7.连接至Github ###

1.  执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>ssh-keygen -t rsa -C "你的邮箱"
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    之后打开C盘下用户文件夹下的.ssh的文件夹，会看到 id\_rsa.pub
    
    [![公钥][83df793aa7847f9aa3ebaa24f60ebe93.png]][83df793aa7847f9aa3ebaa24f60ebe93.png 1]
    
    用记事本打开上述图片中的公钥（id\_rsa.pub），复制里面的内容，然后开始在github中配置ssh密钥。
    
    [![记事本打开公钥][442dca0d64cf5294ffde13125581956c.png]][442dca0d64cf5294ffde13125581956c.png 1]
2.  将 SSH KEY 配置到 GitHub  
    进入github，点击右上角头像 选择`settings`，进入设置页后选择 `SSH and GPG keys`，名字随便起，公钥填到`Key`那一栏。
    
    [![image-20221027112347632][]][image-20221027112347632 1]
    
    [![image-20221027112416710][]][image-20221027112416710 1]
    
    [![image-20221027112657256][]][image-20221027112657256 1]
3.  测试连接，输入以下命令
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>ssh -T git@github.com
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    [![image-20221027112918539][]][image-20221027112918539 1]
    
    出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

### 8.初始化 Hexo 项目 ###

1.  在目标路径（我这里选的路径为【C:/Hexo-Blog】）打开cmd命令窗口，执行`hexo init`初始化项目。
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>hexo init blog-demo(项目名)
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    [![image-20221027113206776][]][image-20221027113206776 1]
2.  进入`blog-demo` ，输入`npm i`安装相关依赖。
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    2
    </pre> </td> 
       <td> <pre>cd blog-demo  //进入blog-demo文件夹
    npm i
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
    [![image-20221027113331624][]][image-20221027113331624 1]
3.  初始化项目后，`blog-demo`有如下结构：

[![image-20221027113438707][]][image-20221027113438707 1]

【node\_modules】：依赖包  
【scaffolds】：生成文章的一些模板  
【source】：用来存放你的文章  
【themes】：主题  
【.npmignore】：发布时忽略的文件（可忽略）  
【\_config.landscape.yml】：主题的配置文件  
【config.yml】：博客的配置文件  
【package.json】：项目名称、描述、版本、运行和开发等信息

1.  输入hexo server或者hexo s 启动项目
    
    [![image-20221027113534970][]][image-20221027113534970 1]
2.  打开浏览器，输入地址：[http://localhost:4000/][http_localhost_4000] ，看到下面的效果，说明你的博客已经构建成功了。
    
    [![博客首页][format_png]][format_png 1]

### 9. 将静态博客挂载到 GitHub Pages ###

1.  安装 hexo-deployer-git
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    </pre> </td> 
       <td> <pre>npm install hexo-deployer-git --save
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
2.  修改 \_config.yml 文件  
    在blog-demo目录下的\_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的[配置描述][Link 1]。  
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为`main`代表主分支（注意缩进）。
    
    YAML
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    2
    3
    4
    </pre> </td> 
       <td> <pre>deploy:
      type: git
      repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
      branch: main
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
3.  修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。
    
    SHELL
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>1
    2
    </pre> </td> 
       <td> <pre>hexo clean &amp;&amp; hexo generate &amp;&amp; hexo deploy  // Git BASH终端
    hexo clean; hexo generate; hexo deploy  // VSCODE终端
    </pre> </td> 
      </tr> 
     </tbody> 
    </table>
    
     *  hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
     *  hexo generate：生成静态文章，可以用`hexo g`缩写
     *  hexo deploy：部署文章，可以用`hexo d`缩写
        
        [![image-20221027113704801][]][image-20221027113704801 1]
        
        注意：deploy时可能要你输入 username 和 password。
        
        如果出现`Deploy done`，则说明部署成功了。
        
        [![image-20221027113756069][]][image-20221027113756069 1]
        
        稍等两分钟，打开浏览器访问：[https://Fomalhaut-Blog.github.io][https_Fomalhaut-Blog.github.io] ，这时候我们就可以看到博客内容了。

###  ###

[image-20221027113923949]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/385820e6722a4c80b1ef1c5e0f10c79f.png
[image-20221027113923949 1]: https://s1.vika.cn/space/2022/10/27/6de50dfe03604b07aa26fb7dd5fe1f99
[Download _ Node.js]: https://nodejs.org/en/download/
[Previous Releases _ Node.js]: https://nodejs.org/en/download/releases/
[image-20221027173738226]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/8e8fe9f4583a489dbc13899222e99abf.png
[image-20221027173738226 1]: https://s1.vika.cn/space/2022/10/27/876780920daf4f8fb319d49ff68f17a3
[image-20221027173525181]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/135b1b0226384052a6819d06b7cb8671.png
[image-20221027173525181 1]: https://s1.vika.cn/space/2022/10/27/f05830f48da44ea98d2a55c3a6663004
[GitHub_ Let_s build from here _ GitHub]: https://github.com/
[Github]: https://img-blog.csdnimg.cn/img_convert/9f50803123be1935164122d643067dc1.webp?x-oss-process=image/format,png
[Github_Github]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/7498c1a0259243f0aceb025aa40bdaa0.png
[Github 1]: https://img-blog.csdnimg.cn/img_convert/25fcca4972108d0e1cc68c8662f79d97.png
[Github_Github 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/bdf31d02b72a4926ab3439c5f69d5a62.png
[image-20221027110619071]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/5b53d8b9953c4b219d20a78505b7e1a5.png
[image-20221027110619071 1]: https://s1.vika.cn/space/2022/10/27/7a06143d180d47088833a486732dccf5
[README.md]: http://readme.md/
[image-20221027111641909]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/5446b3008de949cfb4bc39d2d39a712c.png
[image-20221027111641909 1]: https://s1.vika.cn/space/2022/10/27/0a4dbb10ca69422ca9ccb7493d0f177a
[Git - Downloads]: https://git-scm.com/downloads
[CNPM Binaries Mirror]: https://registry.npmmirror.com/binary.html?path=git-for-windows/v2.36.1.windows.1/
[image-20221027111755697]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/1b6f6a90cee648488bfbe28dfe22be9e.png
[image-20221027111755697 1]: https://s1.vika.cn/space/2022/10/27/28a7d7e6ef3f4df080da8d7e8337431b
[Git Bash]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/5b7a8f3383654dcdb9de4577e5aded00.png
[Git Bash 1]: https://bu.dusays.com/2022/05/13/627d410ddc940.webp
[image-20221027112049822]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/3a73c64af04044a8b5fc338d046c547a.png
[image-20221027112049822 1]: https://s1.vika.cn/space/2022/10/27/9115d60b377a47f3a8b79779a287ee65
[83df793aa7847f9aa3ebaa24f60ebe93.png]: https://img-blog.csdnimg.cn/img_convert/83df793aa7847f9aa3ebaa24f60ebe93.png
[83df793aa7847f9aa3ebaa24f60ebe93.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/4825afa8a08946939a4b6434704bc707.png
[442dca0d64cf5294ffde13125581956c.png]: https://img-blog.csdnimg.cn/img_convert/442dca0d64cf5294ffde13125581956c.png
[442dca0d64cf5294ffde13125581956c.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/b84145cb471449a7b3b859b7e4c38afb.png
[image-20221027112347632]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/3ef2359aac4b4aefa24246a8005ca86e.png
[image-20221027112347632 1]: https://s1.vika.cn/space/2022/10/27/4a69d999fed54ff78a5b84805d3c6a12
[image-20221027112416710]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/ad73ce8ef7f648d9a0989cf7cb1c610f.png
[image-20221027112416710 1]: https://s1.vika.cn/space/2022/10/27/aa20ae7d8db34e2596638f5f031f0814
[image-20221027112657256]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/50bd1b54285b4edea35238fbf531ae58.png
[image-20221027112657256 1]: https://s1.vika.cn/space/2022/10/27/eaccde8a10eb4cde945a1ed221bb6ace
[image-20221027112918539]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/1c9b253d9d1445f8a3faf088d6d3f3bd.png
[image-20221027112918539 1]: https://s1.vika.cn/space/2022/10/27/122bb1ef33074bee84030a525ce1ec56
[image-20221027113206776]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/a6327d146ea74096b87a4a8be9b5e378.png
[image-20221027113206776 1]: https://s1.vika.cn/space/2022/10/27/1fbeb52671cf4b1daeca3660d1a31a2f
[image-20221027113331624]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/e9d0af1af6744d77b235a4a74add53dd.png
[image-20221027113331624 1]: https://s1.vika.cn/space/2022/10/27/150eeb3e61c94b89a1cad2a3079b1f94
[image-20221027113438707]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/b5303cdd8d264df397801cd4fe62c492.png
[image-20221027113438707 1]: https://s1.vika.cn/space/2022/10/27/70cf503f27c54d30a31c6b13735023b7
[image-20221027113534970]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/a1924916d3654287965f4561d1cf8ffd.png
[image-20221027113534970 1]: https://s1.vika.cn/space/2022/10/27/688592f6db1448d29a2f722fc7a0bb0a
[http_localhost_4000]: http://localhost:4000/
[format_png]: https://img-blog.csdnimg.cn/img_convert/5307f79aff018adbc0307d4726b138bc.webp?x-oss-process=image/format,png
[format_png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/4005c7b2d19a4849a7fa3a3ae140f284.png
[Link 1]: https://hexo.io/zh-cn/docs/configuration
[image-20221027113704801]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/8f81ef5b07cf48c0a7c420e9c760a282.png
[image-20221027113704801 1]: https://s1.vika.cn/space/2022/10/27/7ed7b8256d75408aa86e90cd37d0ea53
[image-20221027113756069]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/71635440e6864d4f80155f4cf11d4e4a.png
[image-20221027113756069 1]: https://s1.vika.cn/space/2022/10/27/85b61e7242214d368539d744b4778a5d
[https_Fomalhaut-Blog.github.io]: https://fomalhaut-blog.github.io/