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

作者: Baoxing_ | 来源:发表于2021-01-13 16:43 被阅读0次

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

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

1610280810106882.png

Hexo简介

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

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

效果图

Snipaste_2021-01-12_23-36-23.jpg

Snipaste_2021-01-13_09-48-21.png

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

1. Hexo安装

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

1.1 初始化

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

空白处右键点击Git Bash here

Snipaste_2019-01-14_22-42-57.png

1.2 安装

设置npm淘宝镜像站

npm默认的源的下载速度可能很慢，建议使用淘宝镜像替换。
执行下面的命令，将npm的源设置成淘宝镜像站。

npm config set registry "https://registry.npm.taobao.org"

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

Snipaste_2019-01-14_22-49-32.png

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

Snipaste_2019-01-14_23-33-42.png

Snipaste_2019-01-14_23-35-28.png

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

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

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博客已经成功在本地运行。

Snipaste_2019-01-14_23-17-14.png

1.4 扩展

新建文章或页面。

hexo new <layout> "title"

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

默认是添加posts。

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

hexo生成博文插入图片问题

修改站点配置文件_config.yml 里的post_asset_folder:这个选项设置为true
再运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
1. 比如我生成的 hexo n '看完此文-别说你不懂IoC是什么' 生成的目录结构如下：

  _posts  
    看完此文-别说你不懂IoC是什么  
    看完此文-别说你不懂IoC是什么.md

最后在看完此文-别说你不懂IoC是什么.md中想引入图片时，先把图片复制到看完此文-别说你不懂IoC是什么这个文件夹中，然后只需要在看完此文-别说你不懂IoC是什么.md中按照如下语法引入图片：
```
{% asset_img 图片名.jpg 你想输入的替代文字 %}
```

PS: 这里啰嗦一嘴如果想用[图片上传失败...(image-e72759-1610527250001)]这种语法来插入图片

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

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

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用[图片上传失败...(image-916241-1610527250001)]的方式愉快的插入图片了。

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文件夹

Snipaste_2019-01-14_23-21-10.png

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

Snipaste_2019-01-14_23-22-00.png

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

Snipaste_2019-01-14_23-22-33.png

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

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

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

Snipaste_2019-01-15_00-26-59.png

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

type: git
repo: git@github.com:<Github用户名>/<github用户名>.github.io.git
branch: master

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

Snipaste_2019-01-15_00-29-10.png

2.5 生成页面上传至Github

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

如果报如下错误

Snipaste_2021-01-12_00-44-34.jpg

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

  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 <filename> 新建文章

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包

Snipaste_2019-01-14_23-53-40.png

Snipaste_2019-01-14_23-54-17.png

Snipaste_2019-01-14_23-55-19.png

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

Snipaste_2019-01-14_23-57-20.png

此时的目录结构如下:

Snipaste_2019-01-14_23-58-28.png

3.2 启用主题

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

theme: next

Snipaste_2019-01-15_00-02-09.png

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

Snipaste_2019-01-15_00-04-39.png

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

现在，你已经成功安装并启用了 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 前面注释 # 去除即可。

Snipaste_2019-01-15_00-09-57.png

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

3.5 设置语言

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

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

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

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

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

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

1547482690337.png

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

Snipaste_2019-01-15_00-20-48.png

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

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

Snipaste_2019-01-15_00-33-31.png

Snipaste_2019-01-15_00-34-38.png

3.7 添加分类

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

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

Snipaste_2019-01-15_00-42-43.png

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 文件的内容 后面省略一大堆内容

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

Snipaste_2021-01-12_01-57-58.jpg

3.8 个性化定制

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

在http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons选择合适的样式复制代码到themes/next/layout/_layout.swig，在<div class="headband"></div>下面：

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

Snipaste_2019-01-15_00-58-37.png

<!-- GitHub-start -->
    <a href="https://github.com/bd3star" target="_blank">
      <img style="position: absolute; top: 0; right: 0; border: 0;"
       src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
    </a>
<!-- GitHub-end -->

Snipaste_2019-01-15_00-59-41.png

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

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>

在NexT中_config.yml，取消注释footer此custom_file_path部分。

custom_file_path:
  footer: source/_data/footer.swig

# 清理缓存
$ hexo clean
# 编译
$ hexo g
# 启动
$ hexo s 
# 部署到 github 上
# $ hexo d

3.10侧边栏社交小图标设置

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

[图片上传失败...(image-760880-1610527250001)]

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

3.11 设置网站图标

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

Snipaste_2019-01-15_01-19-26.png

实现效果

Snipaste_2019-01-15_01-20-01.png

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

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

Hexo简介

效果图

1. Hexo安装

1.1 初始化

1.2 安装

1.3 运行

1.4 扩展

2 本地博客发布到Github Pages

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

2.2，安装发布插件。

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

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

2.5 生成页面上传至Github

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

3.1 下载主题

3.2 启用主题

3.3 验证主题

3.4 主题设定

3.5 设置语言

3.6 设置头像

3.7 添加分类

3.8 个性化定制

3.9 动态背景

3.10侧边栏社交小图标设置

3.11 设置网站图标

更多功能

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

Hexo简介

效果图

1. Hexo安装

1.1 初始化

1.2 安装

1.3 运行

1.4 扩展

2 本地博客发布到Github Pages

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

2.2，安装发布插件。

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

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

2.5 生成页面上传至Github

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

3.1 下载主题

3.2 启用主题

3.3 验证主题

3.4 主题设定

3.5 设置 语言

3.6 设置头像

3.7 添加分类

3.8 个性化定制

3.9 动态背景

3.10侧边栏社交小图标设置

3.11 设置网站图标

更多功能

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3.5 设置语言