基于Hexo和Next搭建个人博客

发表于 | 分类于

这是写给lmm的教程，或许yuti也可以来个姐妹版❤
你需要Node、Git、Hexo、Next，然后你会markdown就行，找一个markdown的编辑就行，很多IDE也支持。

Node

  1. 首先你需要安装Node.js
    按照应用程序的提示安装就行(如果不喜欢安装在c盘记得修改默认路径)，window系统下记得勾选Add to path就行了(新版本似乎是默认勾选了)
  2. 安装完成后打开终端win+R > cmd，输入node -v，显示v+版本号就说明成功了
    node安装完成

  3. （可以跳过）到此为止node和npm已经可以正常使用了，但是目前全局安装的包是在c盘用户目录下X:\Users\youzi\AppData\Roaming\npm的，如果你不喜欢放在c盘可以修改环境变量到安装目录下，当然前提是你的安装目录也不是在c盘
    这有个几年前的笔记，虽然那个时候安装在c盘的，道理差不多
    其他更详细的图文可以网上搜索很多教程

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 1. 配置npm的路径，比如我把node在第一步时安装到了D:\Download\nodejs
    npm config set prefix "D:\Download\nodejs\node_global"
    npm config set cache "D:\Download\nodejs\node_cache"
    // 可以通过npm config ls查看是否修改成功

    // 2. 修改环境变量
    系统变量新建NODE_PATH： 值 D:\Download\nodejs\node_global\node_modules
    用户变量修改Path： 值 D:\Download\nodejs\node_global\
    // 用户变量处一定要修改成第二步中设置的prefix的路径（原本是X:\Users\youzi\AppData\Roaming\npm），
    // 否则安装模块后，会出现“XXX不是内部或外部命令”

  4. npm源建议修改为淘宝镜像，否则经常安装速度很慢，但是今天必须切换，不然后面hexo无法安装成功
    npm config set registry https://registry.npm.taobao.org/
    切换淘宝镜像

Git

en,跟node差不多，就懒得截图了，网上一大片教程，这个基本上大家装机就装了吧，当然我这里也有一个当时的粗糙的笔记可以看看
切记安装好再下一步，不然你半路会回来的

Hexo

Hexo就是一个静态博客框架，支持markdown书写，然后其他的介绍就网上看下别人的介绍吧，不太重要
然后Hexo中文文档很详细，有问题看文档就好

安装

切记windows用户使用淘宝镜像，不要用文档里说的，安装不成功的！！！很重要！！！

1
2
3
4
5
// 官网介绍的是npm install hexo-cli -g，反正我切镜像之前没安装成功，难受...
cnpm install hexo-cli -g

// 查看是否安装成功   
hexo version

创建

  1. 选择一个目录，到时候存放博客以及其他配置文件的地方

    1
    2
    3
    hexo init demoBlog
    cd demoBlog
    cnpm install

    hexo init后面的demoBlog是相对当前路径的目录名，这一步执行后需要等一段时间，将会从github上的hexo仓库里面clone必须文件，所以必须先安装Git
    然后最后你就可以看到最后的目录结构了，就像下图
    安装目录

  2. 启动本地，根据提示在浏览器打开http://localhost:4000
    博客首页
    至此你的博客就成功90%啦，鼓掌撒花
  3. 接下来打开source/_post/目录然后可以看到一个hello-world.md的文件，打开这个文件修改一下，然后保存后刷新浏览器页面，你就可以看到改变了。
    修改
  4. 再来第二篇博客吧，hexo new 第二篇博客 new后面跟着的就是文件名，后面默认为文章的标题，支持中文的
    第二篇
    在第二篇文章上写点什么吧，老规矩：保存，刷新。是不是傻瓜式操作，是不是很简单!
    第二篇

部署

废话介绍

虽然本地是可以浏览了，但是别人访问不到呀，虽然不见得有人看，但是不放服务器上那还不如放印象笔记呢是吧。所以我们再折腾一下下。
Hexo部署非常简单，就一条命令hexo deploy,当然事先还有点配置。但是支持的方式非常多，我觉得就大致分为两类（可能是错的，个人感觉），就是你部署的目标是托管平台还是你自己的服务器

第一类托管平台：Git、Heroku、Netlify等，第二类就是自己的服务器：Rsync、OpenShift、FTPSync、SFTP。前者配置简单，类型和URL就行；后者需要在服务器的主机地址、账号、密码等。

因为我用的是Git，所以我就介绍一下Git的操作。其他的网上搜索一下教程吧，或许后面我有自己的服务器我会把第二类的补充上来，当然我现在很穷没办法养一台服务器，当然也没有很贵，主要是目前性价比太低，可以但没必要。

对了Github由于不允许百度爬数据的，所以发布到Github上没办法被搜索到的，所以可以的话买自己的服务器的吧，如果你是学生阿里云这种还有学生价的，然后到时候做做SEO就很棒了，你们要有追求

（可以跳过）Github新建repository

官网github pages有文档介绍

  1. 登录github，新建一个repository，注意名称一定是github账户名.github.io，就是图中的红框
    这一步很重要不要弄错了，我的是之前已经新建了所以提示已存在了
    新建
  2. 然后打开刚才新建的repository的setting，你就可以在Github Pages那里看到一个地址，你就可以访问了，还可以选一个主题，但是没必要，挺丑的。
    新建

正式部署

好了，文章也写好了，放文章的服务器也准备好，我们把东西放上去就行了吗。我们知道简单的配置加一句命令就行了，但是你试过就知道不行了，因为markdown文件浏览器人家不认识呀，不知道怎么展示呢。不然hexo拿来干嘛的，还要把你的文章转成浏览器能看懂的东西放上去呢。
所以我们不仅要知道怎么放，还要把东西放对。好像话有点过多，至今没进入正题……

  1. 生成静态文件，hexo generate
    然后火花带闪电以后，你就发现目录下多了个public的文件夹，里面就无外乎一些html、css文件或许有一些图片等，反正就是浏览器认识的东西了
  2. 配置必要信息，打开根目录下的_config.yml文件
    这个配置文件很重要也很简洁，都有注释，看一下就知道怎么配了，就先配三个重要，其他的后面慢慢去玩。
    • 博客的基本信息和语言，默认是英文，可以改成中文。
      语言涉及的东西在theme/xxx/languages/,目录下有常见语种的关于网站关键词汇的翻译
      语言
    • 网站的地址，或者时服务器的地址，那个root就是指你要把博客内容放置在服务器的目录路径
      这一步很重要，决定了到时候你的博客访问地址
      地址
    • 服务器的相关信息
      这一步很重要，信息错了就访问不到了
      服务器

  3. 第一步完成了文章的翻译，第二步告诉放置的位置，当然不是可以放了，我们还要装个插件，hhhh。找个运输工具帮我们放过去
    戳->Hexo有完整方式，都需要根据你自己的情况选择对应插件安装
    我们选择的是Git,安装到当前项目就行

    1
    cnpm install hexo-deployer-git --save

  4. 真的是最后一步了，hexo deploy 然后到时候会让你输入Github的账号和密码，按照提示填就行，完成后，你就可以发现刚刚那两篇文章就可以远程访问了

hhhh，这100%的路终于走完了，你的博客已经完成了，可以快乐的写写写了！！！

Hexo常用命令总结

虽然我们之前做了这么多操作，但是前期嘛，累一点，后面就简单的很啦
其中hexo new [layout] <title>为例，中括号表示可选项，不声明就是用默认值；尖括号表示变量，根据你情况随便替换

  1. hexo init <folder> 建立站点
    ：目录名。相信我不需要了，除非你手贱把之前的删了重新再来一个也是没问题的
  2. hexo new [layout] <title> 新建文章，然后也可以直接在source/_post目录下直接新建markdown文件
    layout取值和scaffolds目录下的文件名有关，默认有draft表示草稿；page表示页面；post表示文章，默认就是post，就是一般的文章类型，
    或者还可以新建其他类型，但是一般就默认就行，后面会有用到page的场景，也就一次
  3. hexo server本地起个服务，预览一下线上效果
  4. hexo generate生成静态文件，就是翻译一下
  5. hexo deploy部署到服务器
    生成静态文件和部署可以合并成一个命令hexo deploy -g
  6. hexo clean 修改了配置文件
    例如_config.yml或者其他主题目录下的配置文件，需要清除下缓存，遇到改了什么东西没生效的时候执行一下会有惊喜，其实就是把public文件夹删除了
    还有其他命令，看官网吧

Hexo目录说明

目录说明

Next

虽然博客成了，大家都是精致人儿，肯定是接受不了这主题饿，不然网上折腾出的主题这么多。
网上主题真的非常非常多，你看到别人风格非常喜欢的话也可以fork过来，我这里就介绍一个Next，非常简约风。

当然，常规指路Next官网

  1. 切换到博客的根目录下

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next

    耐心等一下，会比较慢

  2. 打开博客的_config.yml，修改theme: next
  3. 重启本地服务，Ctrl+C,然后hexo server
  4. 刷新浏览器，你的页面已经焕然一新了
    主题

Next优化

这个比较私人了，按照自己的爱好自己配置就好，文件里面注释非常详细，然后指路官网主题配置的一些类型，任君挑选
其他锦上添花的时就后面慢慢捣鼓吧

其他

代码内联样式

这个是官网并没有，Next主题只能选择代码的高亮主题，就几种，而且是针对代码块的，内联样式的代码样式是固定的
那个内联样式的代码是我自己取的名字，就是是否换行的区别
code
可以看到不换行的黑色背景和白色主题色区分非常的不明显

  1. 多行代码：找到theme/next/_config.yml文件修改多行代码样式为暗色主题,搜索highlight就行

    1
    2
    3
    4
    5
    # Code Highlight theme
    # Available value:
    #    normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: night

  2. 不换行的内联代码
    首先先上效果图，颜色值上面可以自己修改，当然需要你会点css
    code1

    修改方法，打开theme/next/source/css/_common/components/highlight/highlight.styl文件，找到.code修改color的值，并且添加一个border
    code2
    上面的配置修改后都要记得重启服务哦，必要时执行hexo clean

按照上面的场景，如果你觉得网站有些样式你不喜欢也可以下theme里面对样式更加深度定制。

  1. 首先要找规律，找到不换行代码的class是code
    c1
  2. 在theme/next/source/目录下全局搜索.code,然后把筛选出样式文件；为什么会在source目录下搜索，之前说过source是工作区，源码基本都在这里
    c2
    c3
  3. 然后修改成你想要的值就OK啦，当然你也可以保持编程的风格，将值先映射到枚举值中
    c4