使用hexo+github搭建属于自己的博客

分手后的思念是犯贱 2022-05-27 06:49 273阅读 0赞

本文章是查阅了一下四个博客文章后所做的总结：  
https://blog.csdn.net/gdutxiaoxu/article/details/53576018  
https://www.cnblogs.com/fengxiongZz/p/7707219.html  
https://segmentfault.com/a/1190000009009697\#articleHeader15  
https://blog.csdn.net/qq\_33699981/article/details/72716951

--------------------

#### 整体项目需要使用git，node.js等，以及写博客时需要使用markdown语法，最好在部署前对这些有些了解，当然就算不了解也并不影响整个部署 ####

--------------------

### 一、配置环境以及准备 ###

#### 1.安装并配置node.js以及git ####

#### 2.在github中新建一个项目（记得点击添加README，项目名最好是“github用户名.github.io"） ####

#### 3.在建好的项目右侧有个settings按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，发现该项目已经被部署到网络上，能够通过外网来访问它。 ####

#### 4.在合适的地方新建一个文件夹，进入文件夹使用下面的命令安装Hexo ####

npm install hexo -g

#### 5.使用下面的命令查看是否安装成功 ####

hexo -v

#### 6.输入下面的命令初始化文件夹 ####

hexo init

#### 7.输入下面的命令安装所需要的组件 ####

npm install

#### 8.输入下面的命令首次体验hexo ####

hexo g

#### 9.输入下面的命令开启服务器（若端口被占用则使用 `hexo server -p 端口号` ）来改变端口号 ####

hexo s

![这里写图片描述][70]

##### 出现该页面则说明成功了 #####

#### 10.将Hexo与github page联系起来 ####

##### （1）配置Git个人信息(如果你之前已经配置好git个人信息，请跳过这一个步骤) #####

##### a.设置Git的user name和email：(如果是第一次的话） #####

git config --global user.name "your_name"
    git config --global user.email "your_email"

###### b.生成密钥 ######

ssh-keygen -t rsa -C "your_email"

#### 11.配置Deployment ####

##### 在\_config.yml文件中，找到Deployment，然后按照如下修改： #####

deploy:
      type: git
      repo: git@github.com:yourname/yourname.github.io.git
      branch: master

### 二、写博客，发布文章 ###

#### 1.使用下面的命令新建一个博文（新建后在hexo\\source\\ \_posts中将会看到你新建的.md后缀的文件） ####

hexo new post "article title"

#### 2.使用markdown编辑器打开并进行编辑文章 ####

#### 3.使用下面的命令进行生成和部署，成功后便可在https://yourName.github.io访问您的博文 ####

hexo g   // 生成
    hexo d   // 部署

##### 注：若提示`deloyer not found:git`则说明缺少一个扩展，运行`npm install --save hexo-deployer-git`命令即可解决 #####

### 三、修改主题 ###

hexo提供了许许多多的主题，我们可以轻松的修改一个自己喜欢的主题，具体方法如下：

#### 1.在 Hexo 中有两份主要的配置文件，其名称都是 \_config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。 为了描述方便，在以下说明中，将前者称为 *站点配置文件*， 后者称为 *主题配置文件*。在文件夹的themes中使用`git clone`命令下载自己喜欢的主题，如我们需要使用NexT主题，则可以使用 ####

cd your-hexo-site
    git clone https://github.com/iissnan/hexo-theme-next themes/next

#### 2.启用主题 与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。 启用 NexT 主题 ####

theme: next

此时即可使用浏览器访问 http://localhost:4000 ，检查站点是否正确运行。 当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。选择 Scheme Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
    Mist - Muse 的紧凑版本，整洁有序的单栏外观
    Pisces - 双栏 Scheme，小家碧玉似的清新
    Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面

注释 \# 即可。 选择 Pisce Scheme

#scheme: Muse
    #scheme: Mist
    scheme: Pisces

#### 3.next主题的hexo博客个性化设置 ####

博客的可个性化设置较多，比如背景设置，博客头，作者，简介，以及插入一下第三方的插件等。在此我就不做赘述，最后我在当时部署时总结了这两个不错的博客教程  
https://segmentfault.com/a/1190000009009697\#articleHeader15  
https://blog.csdn.net/qq\_33699981/article/details/72716951

#### 4.**设置语言** 编辑站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下： ####

language: zh-Hans

<table> 
 <thead> 
  <tr> 
   <th align="center">语言</th> 
   <th align="center">代码</th> 
   <th align="center">设定实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">English</td> 
   <td align="center">en</td> 
   <td align="center">language: en</td> 
  </tr> 
  <tr> 
   <td align="center">简体中文</td> 
   <td align="center">zh-Hans</td> 
   <td align="center">language:zh-Hans</td> 
  </tr> 
  <tr> 
   <td align="center">Français</td> 
   <td align="center">fr-FR</td> 
   <td align="center">language:fr-FR</td> 
  </tr> 
  <tr> 
   <td align="center">Português</td> 
   <td align="center">pt</td> 
   <td align="center">language:pt</td> 
  </tr> 
  <tr> 
   <td align="center">繁體中文</td> 
   <td align="center">zh-hk或者zh-tw</td> 
   <td align="center">language:zh-hk</td> 
  </tr> 
  <tr> 
   <td align="center">Русский язык</td> 
   <td align="center">ru</td> 
   <td align="center">language:ru</td> 
  </tr> 
  <tr> 
   <td align="center">Deutsch</td> 
   <td align="center">de</td> 
   <td align="center">language:de</td> 
  </tr> 
  <tr> 
   <td align="center">日本語</td> 
   <td align="center">ja</td> 
   <td align="center">language:ja</td> 
  </tr> 
  <tr> 
   <td align="center">Indonesian</td> 
   <td align="center">id</td> 
   <td align="center">language:id</td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220527/6febe9e7485b4de3b0c45d4ac12ce26d.png