安装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. SDUT-3347_数据结构实验之数组三:快速转置

    数据结构实验之数组三:快速转置 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 转置运算是一种最简单的矩阵运算,对于一个 ...

  2. Android Http实现文件的上传和下载

    最近做一个项目,其中涉及到文件的上传和下载功能,大家都知道,这个功能实现其实已经烂大街了,遂.直接从网上荡了一堆代码用,结果,发现网上的代码真是良莠不齐,不是写的不全面,就是有问题,于是自己重新整理了 ...

  3. C运行时库函数

    C运行时库函数是指C语言本省支持的一些基本函数,通常是汇编直接实现的. API函数是操作系统提供给用户方便设计应用程序的函数,实现一些特定的功能,API函数也是C语言的函数实现的. 他们之间区别是: ...

  4. Hibernate懒加载导致json数据对象传输异常的问题---(非常重要)

    1. 异常: [console_demo][WARN] [2016-12-15 19:49:35] org.springframework.web.servlet.mvc.support.Defaul ...

  5. H3C 广域网的作用

  6. codeforces1249-div3

    A B C 等比数列的性质,前面的i项的和,不会超过第i+1项 D 有若干个区间,要求每一个点被区间覆盖的次数不能超过k个.问移除的最少的区间的数目. 贪心: 若某个点被覆盖了k次以上,那么肯定是移除 ...

  7. 各种浏览器的兼容css

    http://blog.csdn.net/wyx100/article/details/50450728 1.Mozilla内核[css]元素选择器{-moz-transition:运动的样式 持续时 ...

  8. 【CSS3】使用CSS3制作全屏切换效果

    在线演示: DEMO DEMO中及以下代码并没有写兼容代码,请使用高级浏览器打开,IE版本对CSS3支持并不太友好,IE11打开没有滚屏效果. 兼容代码前缀: -webkit- -moz- -o- - ...

  9. DataTable添加单个或多个字段组成的主键,实现查找

    单列主键 DataTable fdt = CmmDb.GetDataTable(orgsql); fdt.PrimaryKey = new DataColumn[] { fdt.Columns[&qu ...

  10. jq实现二级菜单/下拉菜单

    https://www.cnblogs.com/sandraryan/ 不是很难,直接上代码~ 有写注释 <!DOCTYPE html> <html lang="en&qu ...