安装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认证,可能会出现问题,原因不详

博客初始化

  1. 安装hexo

    1
    npm i -g hexo
     
  2. 新建存放项目的文件夹

  3. hexo初始化

    1
    hexo init
     
  4. 查看是否安装成功

    1
    hexo -v
     
  5. 初始化成功之后,会看到一系列文件夹

    • node_modules:是依赖包
    • public:存放的是生成的页面
    • scaffolds:命令生成文章等的模板
    • source:用命令创建的各种文章
    • themes:主题
    • _config.yml:整个博客的配置
    • db.json:source解析所得到的
    • package.json:项目所需模块项目的配置信息
  6. 将博客绑定到github(非必须)

    • 此处非必须,如果不想绑定github,请往下拉,会有绑定coding的方式

    • 登录github,创建仓库

    • 登录git bash绑定邮箱和用户名

      1
      2
      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

      点击右上角的new ssh key 将id_rsa.pub文件里面的内容全部粘贴进去,不用管格式内容啥的,直接全部粘贴

    • 配置自定义域名解析(非必须)

      • 购买域名,无需备案(百度抓取你的个人博客文章链接,最好还是备案一下,有优先权,也容易被录取,否则,录取过程会很慢很慢。没录取就只能通过链接才能访问到你,直接百度搜索,搜索不到你。谷歌录取很快。^_^原谅我不会表述)
      • 相关工具,百度搜索,百度站长,谷歌搜索,谷歌站长
      • 需要在博客项目的source文件夹下创建一个CNAME的文件(无后缀)
      • 然后到域名配置DNS处,添加一条记录类型为CNAME,指向到“用户名.github.io” ,该路径是github静态网站部署后的默认访问路径,也是为什么仓库名称必须是用户名的原因
  7. 将博客绑定到coding

    • 注册企业版coding,企业版,企业版,企业版,重要的事情说三遍
    • 创建项目

    • 登录git bash绑定邮箱和用户名
      1
      2
      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
      点击个人设置

      添加公钥,将id_rsa.pub文件里面的内容全部粘贴进去,不用管格式内容啥的,直接全部粘贴
    • 配置自定义域名解析(非必须)
      • 购买域名,无需备案(百度抓取你的个人博客文章链接,最好还是备案一下,有优先权,也容易被录取,否则,录取过程会很慢很慢。没录取就只能通过链接才能访问到你,直接百度搜索,搜索不到你。谷歌录取很快。^_^原谅我不会表述)
      • 相关工具,百度搜索,百度站长,谷歌搜索,谷歌站长

        选择刚才新建的项目

        新建完成,返回上一步,选择设置

        设置后的页面,按照提示,进行域名配置

        然后到域名配置DNS处,添加一条记录类型为CNAME,指向到“coding默认给的路径”
        我的记录集,没有github的配置,我给删除了
  8. hexo配置和本地启动

    • 打开hexo init 文件中的_config.xml文件

    • 搜索deploy找到内容,修改

      1
      2
      3
      4
      5
      deploy:
      type: git
      repo:
      #github: git@github.com:你的用户名/你的用户名.github.io.git,master
      coding: git@e.coding.net:你的用户名/你的用户名.git,master
       
    • 此处我的github是注释的,因为我没用该git管理工具

    • 可以找到刚才创建的项目,复制链接,后面拼接,master或者其他分支

      • github路径
      • coding路径
    • 本地运行,启动成功后,默认访问路径:localhost:4000

      1
      2
      3
      hexo clean
      hexo -g
      hexo -s
       
    • 上传到服务端运行

      1
      2
      3
      hexo clean
      hexo -g
      hexo -d
       
      • github访问路径:用户名.github.io
      • coding访问路径:创建项目成功之后,会给一个路径,用此路径访问
      • 如果配置域名,可以直接用域名访问

主题配置-next

  1. next下载

  2. 配置
    • 普通配置:主题下载好之后只需要修改_config.xml
  3. 修改主题
    • 进入根目录下的_config.xml,搜索theme,将值更改为next(下载的主题的文件夹名称)
  4. 其他
  5. 注意
    • 那里花里胡哨的,本人不推荐使用。页面宠物,音乐插件,随机背景图片等等都是没必要的东西,会造成资源浪费,会很慢

写文章

  • 博客建立好之后,就该进入重点了
  • 根目录-》source-》_posts 在此文件夹下写文章
  • 文章格式为md格式,不熟悉md格式的,可以查看https://www.runoob.com/markdown/md-tutorial.html
  • 写好md文章之后,在md文章头部插入
1
2
3
4
5
6
7
8
9
10
id: design001    			【/访问路径,不设置默认路径是文件夹名称】
title: 标题
date: 2019-12-04 00:00:00 【 时间,归档会用到】
categories:
- 标签1
tags:
- 标签1
- 标签2
toc: true 【是否开启目录】
top: 20 【排序,从大到小排序】
 
  • 推荐手动截取文章内容,在首页显示。在想要截取的地方添加

    1
    <!--more -->
     
  • md文章格式,图片展示

  • md文章格式,效果演示

_config.xml配置

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

主题配置文件的_config.xml

点击我

根目录配置文件的_config.xml

点击我

个人博客演示地址

https://www.yangxj.top

关于我

详情查看 博客中的关于

hexo+next 详细搭建的更多相关文章

  1. Hexo的详细搭建过程——小白的血泪经历QAQ

    Hexo的详细搭建过程 环境要求: node.js git 这里提供Centos8.2下的安装过程: dnf module list nodejs dnf module install nodejs: ...

  2. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  3. 基于Hexo和Github搭建博客

    搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...

  4. [原创]HEXO博客搭建日记

    博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好 ...

  5. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  6. 基于 Hexo + GitHub Pages 搭建个人博客(三)

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  7. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  8. U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索

    指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索   U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写he ...

  9. 强大博客搭建全过程(1)-hexo博客搭建保姆级教程

    1. 前言 本人本来使用国内的开源项目solo搭建了博客,但感觉1核CPU2G内存的服务器,还是稍微有点重,包括服务器内还搭建了数据库.如果自己开发然后搭建,耗费时间又比较多,于是乎开始寻找轻量型的博 ...

随机推荐

  1. Java“类”的内存分配_case1

  2. 2019-10-7-WPF-如何跨线程重新抛出异常

    title author date CreateTime categories WPF 如何跨线程重新抛出异常 lindexi 2019-10-07 13:24:54 +0800 2019-10-4 ...

  3. linux下修改gcc编译器版本

    可以使用如下命令行来让 gcc 选择不同的 C++ 版本: g++ -std=c++11 main.cpp 在你的系统中,由于编译器或是编译器设定上的差别,操作也许有所不同.    

  4. HZOJ 分组

    打了好多个代码. 对于测试点1,11:手动模拟. void QJ1_11() { ) { int tk; ]+a[]))tk=; ; if(tk<=k) { puts("); puts ...

  5. dev stg prd 开发 测试 生产环境

    dev development 开发环境stg stage 测试环境prd product 线上环境

  6. Python关键点常识

    关键点常识 Python的发音与拼写 Python的作者是Guido van Rossum(龟叔) Python正式诞生于1991年 Python的解释器如今有多个语言实现,我们常用的是CPython ...

  7. URL的转义和解析

    在开始python编程之前我们先来看看一个关与url的知识 在url中会有一些特殊字符,如果你写过cgi程序,并且提交一个表单去调用你的cgi,你会很清楚的 像?name=aiqier&age ...

  8. jQuery 文档操作 - remove() 方法

    移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...

  9. vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

    <template>   <div class="card-index pt-relative">     <div id="wrapper ...

  10. C#的类

    一.String类 1.Length 字符的长度 string x = Console.ReadLine();int i = x.Length;// Length 是获取字符串的长度(从1开始数)Co ...