基于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