使用hexo和gitee搭建个人博客

[TOC]

blog搭建效果

请前往我的个人站查看部署效果—> https://www.cloudinwinter.com

hexo搭建blog步骤

环境准备

1.node.js 下载安装（选择对应系统的版本） ：https://nodejs.org/en/download/
2.git的下载安装：https://git-scm.com/download/win

友情提示：使用淘宝的镜像地址(http://npm.taobao.org/)，使用cnpm命令安装对应文件

使用hexo生成blog需要的静态资源

—-> hexo官网地址,需要了解的可以自己看看。

1.打开git 安装后的客户端工具git bash（和cmd窗口打开方式相同），执行安装hexo的命令

npm install -g hexo-cli

2.验证node.js,git,hexo的安转效果

node --version
hexo --version
git --version

3.使用git bash 切换到对应目录，执行以下命令，会在当前目录生成对应的文件夹

hexo init blog

目录结构展示如下:

修改配置文件完成本地访问blog

1. source目录下完成文章的编辑，当然也可以使用默认的文件。

   

这里我使用的是用Typora,免费而且很好用，但是最终的页面展示还是要看使用的主题对markdown语法的支持。具体使用文档可以参照马克飞象的在线 的模板.

2. 按照hexo官网文档完成_config.yml的配置。暂时不修改也是可以的。

3. 在hexo生成的根目录下执行命令，并完成本地访问。

   # 清除之前生成的静态文件
   hexo clean
   # 生成文件并部署网站，生成的文件存放于public文件夹下
   hexo g -d 
   # 启用服务 -p 参数指定端口号，执行完成后会提示你本地的访问路径,执行ctrl + c退出服务
   hexo server

建立远程仓库

注意：首先你需要有对应的账号，完成git用户和ssh（下拉和推送数据到远程仓库的免密配置）的配置。

在github上建立blog访问页面

1. github参照https://pages.github.com/页面中的介绍建立仓库。

2. 将github的地址配置到_config.yml文件中,在注解中对应的属性的配置都有对应的链接地址

   deploy:
     type: git
     #仓库的ssh地址
     repository: git@github.com:用户名/用户名.github.io.git
     branch: master

3. 执行命令将hexo生成的静态数据推送到远程仓库

   #出现ERROR Deployer not found: git错误  执行npm install --save hexo-deployer-git
   hexo d
   # 还可能出现本地ssh秘钥配置错误

4. 访问远程博客的地址：https://用户名.github.io/

在gitee上建立blog访问页面

1.在gitee上建立仓库，名称随意，建立成功后按下图选择gitee pages服务

2.和github的配置一样，推送文件到gitee仓库

3.完成blog的访问：http://用户名.gitee.io/blog/

4.你完成文章更新后，需要在gitee pages页面点击更新才会有效，这个需要吐槽一下。

部署gitee时出现css和js无法加载解决

原因：部署在gitee和github的除git仓库地址需要修改之外，还需要修改一下_config.yml的如下配置不同

#github
url: https://用户名.github.io/
root: /
#gitee
url: http://用户名.gitee.io/blog
root: /blog

blog主题修改

下载你需要的主题（blog的最终显示效果）访问不了可以换一个浏览器试试,选中你需要的主题，然后进入对应主题的github地址，查看对应的说明文档。

a. 这里我下载的主题是 3-hexo，安装步骤参照文档即可。

blog相关配置

1. gittalk：https://github.com/settings/applications/1182413 (gittalk评论模块依赖于github的评论模块，需要github账号)

2. 不蒜子网站访问计数配置

3. blog在线联系功能

4. Hexo博客添加live2d卡通人物

5. 配置文件记录，请自行调整 ，具体配置参考官方文档

   title: 摘星楼
   subtitle: 'emptycloud`s blog'
   description: '用于学习和记录'
   keywords:
   author: cloudinwinter
   language: zh-CN
   timezone: 'Asia/Shanghai'
   
   root as '/child/'
   url: https://用户名.github.io/
   root: /
   #url: http://用户名.gitee.io/blog
   #root: /blog
   permalink: :title/
   permalink_defaults:
   pretty_urls:
     trailing_index: true # Set to false to remove trailing index.html from permalinks
   
   source_dir: source      
   public_dir: public
   tag_dir: tags
   archive_dir: archives
   category_dir: categories
   code_dir: downloads/code
   i18n_dir: :lang
   skip_render: CNAME
   
   new_post_name: :title.md # File name of new posts
   default_layout: post
   titlecase: false # Transform title into titlecase
   external_link:
     enable: true # Open external links in new tab
     field: site # Apply to the whole site
     exclude: ''
   filename_case: 0
   render_drafts: false
   post_asset_folder: true
   relative_link: false
   future: true
   highlight:
     enable: false
     line_number: true
     auto_detect: false
     tab_replace: ''
   index_generator:
     path: ''
     per_page: 10
     order_by: -date
   
   default_category: uncategorized
   category_map:
   tag_map:
   
   meta_generator: true
   
   date_format: YYYY-MM-DD
   time_format: HH:mm:ss
   
   use_date_for_updated: false
   
   per_page: 10
   pagination_dir: page
   include:
   exclude:
   ignore:
   theme: 3-hexo
   deploy:
     type: git
     repository: git@github.com:cloudinwinter/cloudinwinter.github.io.git
     #repository: git@gitee.com:cloudinwinter/blog.git
     branch: master

配置自定义域名访问blog

我使用的是华为云的服务，不过大致流程应该是一样的。流程如下：

购买域名 –> 等待 –> 实名认证（先查看认证是否审核通过） –> 配置解析 –> 修改github的配置

1. 域名解析配置

2. github的域名配置在blog项目的settings界面。

   

注意：配置后在仓库中会出现文件对应的配置文件CNAME，github依靠这个切换访问地址，所以你需要将文件放置到你的hexo根目录的source文件夹下。参考hexo自定义域名及解析

修改 _config.yml 文件:

skip_render: CNAME

执行命令：

hexo clean
hexo g -d

3. 免费的域名 申请请搜索相关文章)

4. 免费的域名解析，大家自己搜索一下吧。

5. 添加ssl连接访问，这个还有其他方式，大家自行了解，如netlify启用ssl访问，github这个应该是使用github自己的证书。

6.请前往我的个人站查看部署效果—> https://www.cloudinwinter.com

blog 图片问题解决

1. 安装 hexo-asset-image\

2. 反正都是静态资源，放到gitee上或github上直接访问就行，示例地址：

   https://cloudinwinter.gitee.io/blogimg/img/image-20191203115759905.png

   – 》当然最好是和github的blog项目放在一起最好

   a. 修改hexo的_config.yml配置如下，

   # 相对路径，从hexo的根目录的source文件夹开始
   skip_render:
       - 'CNAME'
       - 'img/**'

   b. 配置好了并且全局替换文章中对应图片路径为blog的域名即可执行命令如下：

   hexo clean
   hexo d -g

​

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1773678210@qq.com