HEXO+Gitee博客搭建[Dark凌云]

HEXO+Gitee博客搭建

1. 安装软件

1. 安装node.js
2. 安装git软件

2. 软件的配置和博客搭建

2.1 环境检查和配置

1. 在要搭建的博客目录下我这里是D:\TechnologyBlog\demo_web\，鼠标右键打开Git Bash here，输入以下命令查看是否安装成功:

   node -v
   npm -v
   

2. 安装淘宝的cnpm管理器

   npm install -g cnpm --registry=http://registry.npm.taobao.org
   

3. 确认是否安装成功cnpm

   cnpm -v
   

4. 安装依赖

   cnpm install hexo-server hexo-browsersync hexo-renderer-pug hexo-renderer-sass hexo-renderer-ts --save
   

5. 配置Gitee全局

   git config --global user.name "用户名"
   git config --global user.email "邮箱"
   

2.2 创建博客

1. 安装HEXO框架

   cnpm install -g hexo-cli
   

2. 在博客目录下执行博客初始化命令

   hexo init
   

3. 安装主题，这里以Yue-plus大佬搭建的Arknights主题为例：

   git clone https://github.com/Yue-plus/hexo-theme-arknights.git themes/arknights
   

4. 修改博客目录下的**_config**配置文件，修改主题：

   #在101行附近
   theme: arknights
   

2.3 生成博客以及本地启动

对于hexo的命令，可参考文章：Hexo系列(三) 常用命令详解

1. 生成博客

   hexo g
   

2. 本地启动

   hexo s
   

3. （可选）如果需要清理生成的所有博客文件，然后想要重新生成，可以使用以下命令

   hexo clean
   

2.4 [可选]针对Arknights主题配置

1. 取消自动编号

   如果你的Markdown文档自己写了编号，则需要关闭主题的标题自动编号，打开主题目录配置文件(D:\TechnologyBlog\demo_web\themes\arknights_config.yml)，修改list_number的值为false

   toc:
     list_number: false # true / false ；是否显示编号
     max_depth: 6 # 最大目录深度
     min_depth: 1 # 最小目录深度
   

2. 开启代码高亮

   修改配置文件的hljs值为true，（D:\TechnologyBlog\demo_web_config.yml）

   #在53行附近
   highlight:
     hljs: true
   

3. 博客的配置

3.1 全局配置文件

1. 配置文件详解，更多请参考HEXO官方文档

   # Hexo Configuration
   ## Docs: https://hexo.io/docs/configuration.html
   ## Source: https://github.com/hexojs/hexo/
   
   # Site
   title:                  # 博客名称
   subtitle:               # 博客子标题
   description:            # 作者描述
   keywords:               # 站点关键词，用于搜索优化
   author:                 # 博主名
   language: zh-CN         # 站点语言
   timezone: Asia/Shanghai # 时区
   # 注意
   # 语言这里需要进入 /***/themes/next/languages/ 目录
   # 不同版本的语言名称可能有些许差别
   # *** 为博客根目录
   
   # URL
   ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
   url: http://yoursite.com                # 你的域名，如果有 
   root: /
   permalink: :year/:month/:day/:title/
   permalink_defaults:
   
   # Directory
   source_dir: source
   public_dir: public
   tag_dir: tags
   archive_dir: archives
   category_dir: categories
   code_dir: downloads/code
   i18n_dir: :lang
   skip_render:
   
   # Writing                       # 博文相关
   new_post_name: :title.md        # 博文的格式，默认markdown编辑 
   default_layout: post            # 默认发布的为post，即默认发布的是文章
                                   # 共有三种类型，具体见hexo文档
   titlecase: false # Transform title into titlecase
   external_link: true # Open external links in new tab
   filename_case: 0
   render_drafts: false
   post_asset_folder: false
   relative_link: false
   future: true
   highlight:
     enable: true
     line_number: true
     auto_detect: false
     tab_replace:
     
   # Home page setting
   # path: Root path for your blogs index page. (default = '')
   # per_page: Posts displayed per page. (0 = disable pagination)
   # order_by: Posts order. (Order by date descending by default)
   index_generator:
     path: ''
     per_page: 10              # 首页每页展示的文章数
     order_by: -date           # 按日期逆序
     
   # Category & Tag
   default_category: uncategorized
   category_map:
   tag_map:
   
   # Date / Time format
   ## Hexo uses Moment.js to parse and display date
   ## You can customize the date format as defined in
   ## http://momentjs.com/docs/#/displaying/format/
   date_format: YYYY-MM-DD
   time_format: HH:mm:ss
   
   # Pagination
   ## Set per_page to 0 to disable pagination
   per_page: 10
   pagination_dir: page
   
   # Extensions
   ## Plugins: https://hexo.io/plugins/
   ## Themes: https://hexo.io/themes/
   theme: next                 # 使用的主题，这里选用的是Next主题        
   
   # Deployment                # 下面是第三方扩展，根据个人需求设置，也可不修改以下内容
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type:
   
   search:                     # 实现搜索文章的功能
     path: search.xml
     field: post
     format: html
     limit: 100
   
   feed:                       # 实现博客订阅功能
     type: atom
     path: atom.xml
     limit: 20
   
   sitemap:                    # 生成站点地图用于SEO优化
     path: sitemap.xml
   
   baidusitmap:                # 同上
     path: baidusitemap.xml
   

2. 配置概要

   一般我们只配置Site和Deploy，其他的有需要自行了解。

   配置文件实例：

   # site
   title: 凌云博客
   subtitle: Dark凌云
   description: 一个Demo博客
   keywords: 凌云博客
   author: LingYun
   language: zh-CN
   timezone: ''
   # 扩展
   #关于上传到Gitee后面会讲到
   deploy:
       type: git	#类型
       repo: https://gitee.com/Dr-LingYun/Dr-LingYun.git	#博客仓库地址
       branch: master	#分支
   

4. 博客的编写

1. 生成博客

   hexo n 文章名称
   

2. 打开Markdown文件编写，默认生成格式文本

   ---
   title: 'Hello World !'
   date: 2020-04-15 21:54:02
   tags: code
   category: Example
   ---
   <!--more-->
   

   下面依次解释参数：

   ​ title——文章标题

   ​ date——编写时间，一般可以自动生成也可以手动更改

   ​ tages——标签

   ​ category——类别

   ​ <!–more–>——在此之前的内容称之为概要

   在<!–more–>下面便可编写正常的Markdown文章。

5. Gitee配置并上传博客

1. 获取个人的空间地址

   在设置——个人资料——个人空间地址确认自己的地址，我这里是Dr-LingYun。

   

2. Gitee搭建仓库

   点击创建仓库

   

   **配置仓库，**路径位置填写之前获取到的ID！！！！我这里之前搭建过所以提示已经存在。其他按图片中配置即可。

   

   删除仓库的默认文件

   

3. 配置

   复制HTTPS链接：

   

   打开HEXO配置文件，配置文件（D:\TechnologyBlog\demo_web_config.yml）：

   # 在105行左右
   deploy:
     type: git
     repo: https://gitee.com/Dr-LingYun/Dr-LingYun.git #此处复制之前的HTTPS链接
     branch: master
   

4. 安装git部署插件

   cnpm install --save hexo-deployer-git
   

5. 生成博客且上传,建议在此之前执行一遍 hexo clean命令清理之前生成的博客文件。执行后可能需要输入账号密码，输入Gitee的账号密码即可。

   hexo g && hexo d
   

6. 检查仓库是否上传成功

   

7. 打开Gitee Pages服务（每次上传博客后需要重新启动更新一次）

   

8. 打开域名查看是否搭建成功（刚开始反应有点慢，过段时间就好了）

   

   可以看到博客可以正常访问了。

   

OK,本次教程就到这里。步骤如果还有不完善的地方欢迎加入QQ群讨论：