hexo+next详细搭建

2020-01-02 本文已影响0人 Gatlin

安装node

node下载地址：http://nodejs.cn/download/
具体安装方法，这里不做详写
安装完成可以通过node -v 查看安装是否生效和node的版本
我这里使用的是v10.15.0版本

github和coding

这里对于git的使用，不会详写，具体请自行百度
github和coding都是git代码管理工具，拥有github pages 服务，可以设置静态服务页面
github的服务器是在国外，如果用github部署个人博客，访问的响应速度会比较慢
coding是腾讯云的代码管理工具，本人使用的是这个来部署的（必须企业版coding——团队人数在5人以下是免费的。选择个人版，在搭建https时，https证书可能会有一定的问题）
先暂时不用做双线部署（国内访问coding服务，国外访问github服务），如果做成了双线部署，百度站长的https认证，可能会出现问题，原因不详

博客初始化

安装hexo

npm i -g hexo

新建存放项目的文件夹
hexo初始化

hexo init

查看是否安装成功

hexo -v

初始化成功之后，会看到一系列文件夹
- node_modules：是依赖包
- public：存放的是生成的页面
- scaffolds：命令生成文章等的模板
- source：用命令创建的各种文章
- themes：主题
- _config.yml：整个博客的配置
- db.json：source解析所得到的
- package.json：项目所需模块项目的配置信息
将博客绑定到github（非必须）
- 此处非必须，如果不想绑定github，请往下拉，会有绑定coding的方式
- 登录github，创建仓库
  
  image
  image
- 登录git bash绑定邮箱和用户名
```
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱地址" 
```
- 创建ssh
  输入ssh-keygen -t rsa -C "你的邮箱地址"，找到此目录，C:\Users\你的用户名.ssh
  打开该文件夹下的id_rsa.pub文件，获取内容，copy
- github setting配置ssh
  
  点击右上角的setting
  
  image
  点击右上角的new ssh key 将id_rsa.pub文件里面的内容全部粘贴进去，不用管格式内容啥的，直接全部粘贴
  
  image
- 配置自定义域名解析（非必须）
  - 购买域名，无需备案（百度抓取你的个人博客文章链接，最好还是备案一下，有优先权，也容易被录取，否则，录取过程会很慢很慢。没录取就只能通过链接才能访问到你，直接百度搜索，搜索不到你。谷歌录取很快。^_原谅我不会表述）
  - 相关工具，百度搜索，百度站长，谷歌搜索，谷歌站长
  - 需要在博客项目的source文件夹下创建一个CNAME的文件（无后缀）
  - 然后到域名配置DNS处，添加一条记录类型为CNAME，指向到“用户名.github.io” ，该路径是github静态网站部署后的默认访问路径，也是为什么仓库名称必须是用户名的原因
将博客绑定到coding
- 注册企业版coding，企业版，企业版，企业版，重要的事情说三遍
- 创建项目
  
  image
  image
- 登录git bash绑定邮箱和用户名
```
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱地址" 
```
- 创建ssh
  输入ssh-keygen -t rsa -C "你的邮箱地址"，找到此目录，C:\Users\你的用户名.ssh
  打开该文件夹下的id_rsa.pub文件，获取内容，copy
- coding 设置添加ssh
  点击个人设置
  
  image
  
  添加公钥，将id_rsa.pub文件里面的内容全部粘贴进去，不用管格式内容啥的，直接全部粘贴
  
  image
- 配置自定义域名解析（非必须）
  - 购买域名，无需备案（百度抓取你的个人博客文章链接，最好还是备案一下，有优先权，也容易被录取，否则，录取过程会很慢很慢。没录取就只能通过链接才能访问到你，直接百度搜索，搜索不到你。谷歌录取很快。^_原谅我不会表述）
  - 相关工具，百度搜索，百度站长，谷歌搜索，谷歌站长
    
    image
    
    选择刚才新建的项目
    
    image
    新建完成，返回上一步，选择设置
    image
    
    设置后的页面，按照提示，进行域名配置
    
    image
    然后到域名配置DNS处，添加一条记录类型为CNAME，指向到“coding默认给的路径”
    我的记录集，没有github的配置，我给删除了
    image
hexo配置和本地启动
- 打开hexo init 文件中的_config.xml文件
- 搜索deploy找到内容，修改

deploy:
  type: git
  repo:
      #github: git@github.com:你的用户名/你的用户名.github.io.git,master
      coding: git@e.coding.net:你的用户名/你的用户名.git,master

- 此处我的github是注释的，因为我没用该git管理工具
- 可以找到刚才创建的项目，复制链接，后面拼接,master或者其他分支
    - github路径
    ![image](https://img.haomeiwen.com/i13081166/4988f25ca25846af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    - coding路径
    ![image](https://img.haomeiwen.com/i13081166/104edcbff38a883c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 本地运行，启动成功后，默认访问路径：localhost:4000

hexo clean
hexo -g
hexo -s

- 上传到服务端运行

hexo clean
hexo -g
hexo -d

    - github访问路径：用户名.github.io
    - coding访问路径：创建项目成功之后，会给一个路径，用此路径访问
    - 如果配置域名，可以直接用域名访问

主题配置-next

next下载
- 进入博客项目根目录，打开git bash
- git clone https://github.com/theme-next/hexo-theme-next themes/next
配置
- 普通配置：主题下载好之后只需要修改_config.xml
修改主题
- 进入根目录下的_config.xml，搜索theme，将值更改为next（下载的主题的文件夹名称）
其他
- 具体的配置，大家自行查看https://blog.csdn.net/nightmare_dimple/article/details/86661502，这里就不重复写了
注意
- 那里花里胡哨的，本人不推荐使用。页面宠物，音乐插件，随机背景图片等等都是没必要的东西，会造成资源浪费，会很慢

写文章

博客建立好之后，就该进入重点了
根目录-》source-》_posts 在此文件夹下写文章
文章格式为md格式，不熟悉md格式的，可以查看https://www.runoob.com/markdown/md-tutorial.html
写好md文章之后，在md文章头部插入

id: design001             【/访问路径，不设置默认路径是文件夹名称】
title: 标题
date: 2019-12-04 00:00:00    【 时间，归档会用到】
categories: 
  - 标签1
tags:
- 标签1
- 标签2
toc: true                     【是否开启目录】
top: 20                      【排序，从大到小排序】

推荐手动截取文章内容，在首页显示。在想要截取的地方添加
```

```
md文章格式，图片展示

image
md文章格式，效果演示

image

_config.xml配置

我在这里贴出我的两个_config.xml文件，但是别直接复制，粘贴，只供参考，有一些关于appid和key的私密性东西，我就随便改了一下
例如：Valine评论

关于我

详情查看关于

hexo+next详细搭建

安装node

github和coding

博客初始化

主题配置-next

写文章

_config.xml配置

主题配置文件的_config.xml

根目录配置文件的_config.xml

演示地址

关于我

猜你喜欢

热点阅读