听说每个程序员都要拥有自己的技术博客站!

听说每个程序员都要拥有个自己的站!

小时候想 也许多年以后,当我每天冒出新的胡须,当我脑子里不再是网络游戏,当我逢人就笑,当我脸上找不出半分骄傲,当我开始习惯了指间的香烟,当我足以扛起家中的天,当我讨厌的不再讨厌,埋怨的不再埋怨,回头看 当时那个少年,早已不见,愿你我不负时光,不负自己!

听说每个程序员都要拥有自己的技术博客站!_第1张图片

Hexo简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

如果你是一个不甘寂寞的程序员,也想拥有一个自己的网站,可跟随该篇文章搭建后进而根据自己的喜好,让你的个人站更符合自己的审美

效果图

Baoxing 的个人站 (bd3star.github.io)

听说每个程序员都要拥有自己的技术博客站!_第2张图片

听说每个程序员都要拥有自己的技术博客站!_第3张图片

1. Hexo安装

本步骤需要Git与Node.js的支持。

1.1 初始化

电脑中任选盘符新建一个文件夹作为博客网站的根目录,文件名最好不要是中文。

空白处右键点击Git Bash here

听说每个程序员都要拥有自己的技术博客站!_第4张图片

1.2 安装

设置npm淘宝镜像站

  • npm默认的源的下载速度可能很慢,建议使用淘宝镜像替换。
  • 执行下面的命令,将npm的源设置成淘宝镜像站。
npm config set registry "https://registry.npm.taobao.org"

出现的命令行窗口中输入npm install -g hexo-cli,等待运行完成依次输入以下命令

hexo init <新建文件夹的名称>
cd <新建文件夹的名称>
npm install

听说每个程序员都要拥有自己的技术博客站!_第5张图片

听说每个程序员都要拥有自己的技术博客站!_第6张图片

等待运行完成,此时文件夹中多了许多文件。


这里解释一下各个文件夹的作用:

config.yml

博客的配置文件,博客的名称、关键词、作者、语言、博客主题...设置都在里面。

package.json

应用程序信息,新添加的插件内容也会出现在这里面,我们可以不修改这里的内容。

scaffolds

scaffolds就是脚手架的意思,这里放了三个模板文件,分别是新添加博客文章(posts)、新添加博客页(page)和新添加草稿(draft)的目标样式。

这部分可以修改的内容是,我们可以在模板上添加比如categories等自定义内容

source

source是放置我们博客内容的地方,也就是资源文件夹,里面初始只有一个文件夹,_posts(文章文件夹),之后我们通过命令新建tags(标签文件夹)还有categories(分类)页后,这里会相应地增加文件夹。

themes

放置主题文件包的地方。Hexo会根据这个文件来生成静态页面。


注意后续的命令均需要在站点目录下(即bd3starblog文件夹内)使用Git Bash运行。
此时Hexo框架的本地搭建已经完成了。我们来运行一下看看:
命令行依次输入以下命令

1.3 运行

# 编译文件(生成静态页面)  是 hexo generate 的简写形式
hexo g
# 运行文件 start
hexo s

浏览器中打开http://locakhost:4000或者http://127.0.0.1:4000
可以看到一个网页,说明Hexo博客已经成功在本地运行。

听说每个程序员都要拥有自己的技术博客站!_第7张图片

1.4 扩展

新建文章或页面。

hexo new  "title"

这里的对应我们要添加的内容,如果是posts就是添加新的文章,如果是page就是添加新的页面。

默认是添加posts

然后我们就可以在对应的posts或drafts文件夹里找到我们新建的文件,然后在文件里用Markdown的格式来写作了。

hexo生成博文插入图片问题

  1. 修改站点配置文件_config.yml 里的post_asset_folder:这个选项设置为true
  2. 再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

    1. 比如我生成的 hexo n '看完此文-别说你不懂IoC是什么' 生成的目录结构如下:
      _posts  
        看完此文-别说你不懂IoC是什么  
        看完此文-别说你不懂IoC是什么.md  
  3. 最后在看完此文-别说你不懂IoC是什么.md中想引入图片时,先把图片复制到看完此文-别说你不懂IoC是什么这个文件夹中,然后只需要在看完此文-别说你不懂IoC是什么.md中按照如下语法引入图片:

    {% asset_img 图片名.jpg 你想输入的替代文字 %}

PS: 这里啰嗦一嘴 如果想用![你想输入的替代文字](图片名.jpg)这种语法来插入图片

可安装插件hexo-renderer-marked解决

可以只用npm install hexo-renderer-marked命令直接安装,之后在_config.yaml中更改配置如下:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

2 本地博客发布到Github Pages

2.1,在Github上创建好Github Pages仓库。

(ps: 要自行搜索下(可参考) Github Pages仓库 大概步骤就是 建立 bd3star.github.io 这个仓库 然后空着就可以 最后我们编辑好的html页面及css、js文件都会放到这个仓库里 然后浏览器访问 http://bd3star.github.io 就可以打开该仓库的index.html页面)

2.2,安装发布插件。

站点目录中运行命令行输入npm install hexo-deployer-git --save
后续博客的修改等等各种功能 都需要安装各种插件。这个对博客的帮助是非常大的。
等待插件安装完成。

2.3,将本地目录与Github关联起来。

命令行输入ssh-keygen -t rsa -C "邮箱地址", 这里要输入之前注册Github时的邮箱,例如我之前注册用的是 example@163.com,那命令行就输入ssh-keygen -t rsa -C "example@163.com"输入后一直回车。
打开C:\Users\用户名,文件夹内寻找.ssh文件夹

image

打开Github 点击右上角的头像 Settings 选择SSH and GPG keys

听说每个程序员都要拥有自己的技术博客站!_第8张图片

点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的title 可以随意 点击add 完成添加。

听说每个程序员都要拥有自己的技术博客站!_第9张图片

此时回到命令行。 试一下是否跟Github连接成功。命令行输入ssh -T git@github.com ,弹出的内容输入yes,看到出现Hi ! You've successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个应该是你Github的用户名。

2.4 修改Hexo站点的配置文件。

进入博客文件夹,找到_config.yml文件。 这个是博客配置文件,后面的修改会多次用到它
修改一下title跟url等,url修改为https://<用户名>.github.io,例如我的用户名是example的话,就应该输入https://example.github.io

听说每个程序员都要拥有自己的技术博客站!_第10张图片

拉到文件最底部,在deploy下面添加一个repo项 一个branch项。填入如下代码:

type: git
repo: git@github.com:/.github.io.git
branch: master

图中也是以用户名为example为例。填写完成后保存即可。

听说每个程序员都要拥有自己的技术博客站!_第11张图片

2.5 生成页面上传至Github

命令行输入hexo g,此时Hexo会根据配置文件渲染出一套静态页面。
完成后输入hexo d,此时会将之前渲染出的一系列文件上传至Github。

如果报如下错误

执行如下两行代码. 邮箱和名字可自己定义

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"
# 生成静态页面
hexo g
# 将内容部署到网站 是hexo deploy 的简写 也可以简写成 hexo -d
hexo d
# 启动服务器 是hexo server 的缩写  
hexo s

Tips: 也可以直接输入hexo g -d直接完成渲染和上传。
上传完成后,打开https://<;用户名>.github.io查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。

# 本地运行 可以用debug方式运行 方便调试报错信息
hexo s --debug

根据我的经验,除了第一次部署的时候,我们会重点用到hexo init这个命令外,在平时写博客和发布过程中最常用的就是:

  • hexo n 新建文章
  • hexo s 启动服务器,在本地查看内容
  • hexo g 生成静态页面
  • hexo deploy 部署到网站

以上四个步骤。

其实以上命令我觉得就足够了,文档里还有很多功能,但我在实际使用的过程中都还没有遇到。


3. 美化篇-- 使用 Next 主题

现在我们的博客网站是灰常的不美观的 可以使用添加一些官方提供的主题 这里推荐使用 Next主题

3.1 下载主题

参考地址

3.1.1) 如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。

在终端窗口下,定位到 Hexo 站点目录下(我们的站点目录是 d://blog/bd3star)。使用 Git checkout 代码:

$ cd bd3star
# 注意下面命令的后面 themes/next  指的是将代码 clone 下来放到 themes/next 目录下  以便于我们配置
# 切记不要直接放在站点目录下
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

3.1.2) 不熟悉Git 下载 可以从官网点击 releases->下载最新的zip包

听说每个程序员都要拥有自己的技术博客站!_第12张图片

将重命名后的文件夹放置在 站点目录下的 themes文件夹下

听说每个程序员都要拥有自己的技术博客站!_第13张图片

此时的目录结构如下:

听说每个程序员都要拥有自己的技术博客站!_第14张图片

3.2 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件(即站点目录下的_config.yml文件), 找到 theme 字段,并将其值更改为 next

theme: next

听说每个程序员都要拥有自己的技术博客站!_第15张图片

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

image

3.3 验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug),整个命令是 hexo s --debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

听说每个程序员都要拥有自己的技术博客站!_第16张图片

现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

3.4 主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件(主题配置文件是 站点目录/themes/next/_config.yml),搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

听说每个程序员都要拥有自己的技术博客站!_第17张图片

这里自行试一下 将第一个注释掉 删除第二个注释 使用下后面的几个外观 然后重启下 看下都啥样的

3.5 设置 语言

编辑 站点配置文件及主题的配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:


PS: 这里说明下几个重要的路径 后面将不再重申

站点根路径: `D:\blog\bd3starblog`

站点配置文件路径  `站点根路径\_config.yml`

主题配置文件路径  `站点根路径\themes\next\_config.yml`

# 这里具体是 zh-Hans 还是 zh-CN 要看一下 themes/next/languages 里面有哪个文件
# 另一个需要注意的是 站点配置文件和主题配置文件都有这个language
language: zh-Hans

听说每个程序员都要拥有自己的技术博客站!_第18张图片

hexo s --debug重启服务 查看是否生效

这里都变成中文 配置语言完成

3.6 设置头像

头像显示在右侧区域的

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

地址
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png

头像设置示例

avatar: http://example.com/avatar.png

听说每个程序员都要拥有自己的技术博客站!_第19张图片

3.7 添加分类

修改主题配置文件下的menu分支

听说每个程序员都要拥有自己的技术博客站!_第20张图片

可以看到添加成功了 但是 我们新添加的还不能点击打开(点开报错 Cannot GET /tags/)不要慌,不能获取tags,创建一个就OK!

听说每个程序员都要拥有自己的技术博客站!_第21张图片

hexo new page 'name' # name分别为tags、categories  

这样就创建了pages。
在控制台输入以下命令:

hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录

在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。

分别修改这tags和categories文件夹中的index.md文件,新增type属性,如下:

---
title: 标签
date: 2019-01-14 20:56:48
type: "tags" #新添加的内容
---

categories的修改类似。

---
title: 文章分类
date: 2019-01-14 20:53:04
type: "categories"   #这部分是新添加的
---

给模板添加分类属性 - 这样在我们下次创建文章的时候hexo n test.md会自动有分类和标签 我们填写内容即可

现在我们打开scarffolds文件夹里的post.md文件,给它的头部加上categories:,这样我们创建的所有新的文章都会自带这个属性,我们只需要往里填分类,就可以自动在网站上形成分类了。

title: {{ title }}
date: {{ date }}
categories:
tags:

当你新建一篇博文的时候(我们写的博文到创建到站点目录/source/_posts下面),增加上tags和categories属性值,就能在tags和categories界面检索到你的文章了。

注意: 给文章添加标签又两种写法:

  • 第一种是类似数组的写法,把标签放在中括号[]里,用英文逗号隔开
  • 第二种写法是用-短划线列出来
source/_posts/vim-node.md
---
layout: posts
title: vim-node.md
date: 2019-01-14 22:23:43
categories: 学习笔记
tags: [vi, vim]
---

# vim 笔记

## 01 学习 vi 的目的
此处省略一堆 
这是 很多 很多 很多 内容
source/_posts/Hello World.md
---
layout: posts
title: Hello World.md
date: 2019-01-14 22:23:43
categories: helloworld
tags: [hello, world]
---

这是 helloworld 文件的内容 后面省略一大堆内容

重启后可以看到如下效果 标签和分类可以点击 也可以统计了 并且左侧也发生了一点变化

3.8 个性化定制

添加fork me on github 在博客的左上角或者右上角

http://tholman.com/github-cor...://github.com/blog/273-github-ribbons选择合适的样式复制代码到 themes/next/layout/_layout.swig,在
下面:

注意:须手动输入style放置自己想要的位置

听说每个程序员都要拥有自己的技术博客站!_第22张图片


    
      Fork me on GitHub
    

听说每个程序员都要拥有自己的技术博客站!_第23张图片

3.9 动态背景

目前NexT主题最新的是V6+版本,这个版本中可以有4种动态背景:

  • canvas-nest
  • three_waves
  • canvas_lines
  • canvas_sphere

这里仅演示 canvas-nest 动态背景

# 切换到主题路径下
$ cd themes/next
# 注意 后面  下载到 主题next路径下的 source/lib/canvas-nest 文件夹里面
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

创建footer.swig文件 在 /source/_data目录下

编辑文件footer.swig

在NexT中_config.yml,取消注释footercustom_file_path部分。

custom_file_path:
  footer: source/_data/footer.swig
# 清理缓存
$ hexo clean
# 编译
$ hexo g
# 启动
$ hexo s 
# 部署到 github 上
# $ hexo d

3.10侧边栏社交小图标设置

打开主题配置文件_config.yml,搜索social:, ||之后是在图标库中对应的图标。注意空格就行。

听说每个程序员都要拥有自己的技术博客站!_第24张图片

图标库链接:http://fontawesome.io/icons/

3.11 设置网站图标

默认的网站图标是一个N,当然是需要制定一个图了,在网上找到图后,将其放在/themes/next/source/images里面,然后在主题配置文件中修改下图所示图片位置

听说每个程序员都要拥有自己的技术博客站!_第25张图片

实现效果

image

更多功能

后面还有各种优化 小伙伴们自行各种折腾吧 这里简单说下其他的方向大概都有哪些吧

  • 设置首页不显示全文(只显示预览或者只显示概述)
  • 首页在预览文章显示图片
  • 隐藏页脚 Hexo 及 Next 显示
  • 添加RSS
  • 实现点击出现桃心效果
  • 修改文章内链接文本样式
  • 修改文章底部的那个带#号的标签
  • 在每篇文章末尾统一添加“本文结束”标记
  • 修改作者头像并旋转
  • 博文压缩
  • 修改``代码块自定义样式
  • 主页文章添加阴影效果
  • 在网站底部加上访问量
  • 添加热度
  • 网站底部字数统计
  • 添加 README.md 文件
  • 设置网站的图标Favicon
  • 实现统计功能
  • 添加顶部加载条
  • 在文章底部增加版权信息
  • 修改网页底部的桃心
  • 文章加密访问
  • 添加jiathis分享/自定义图标按钮
  • 博文置顶
  • 修改字体大小
  • 修改打赏字体不闪动
  • 自定义鼠标样式
  • 为博客加上萌萌的宠物
  • DaoVoice 在线联系
  • 点击爆炸效果
  • ......

你可能感兴趣的