关于前端:听说每个程序员都要拥有自己的技术博客站

2次阅读

共计 8149 个字符，预计需要花费 21 分钟才能阅读完成。

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

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

如果你是一个不甘寂寞的程序员, 也想领有一个本人的网站, 可追随该篇文章搭建后进而依据本人的爱好, 让你的集体站更合乎本人的审美

Baoxing 的集体站 (bd3star.github.io)

本步骤须要 Git 与 Node.js 的反对。

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

空白处右键点击Git Bash here

设置 npm 淘宝镜像站

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

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

呈现的命令行窗口中输出npm install -g hexo-cli，期待运行实现顺次输出以下命令

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

期待运行实现，此时文件夹中多了许多文件。

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

config.yml

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

package.json

应用程序信息，新增加的插件内容也会呈现在这外面，咱们能够不批改这里的内容。

scaffolds

scaffolds 就是脚手架的意思，这里放了三个模板文件，别离是新增加博客文章（posts）、新增加博客页（page）和新增加草稿（draft）的指标款式。

这部分能够批改的内容是，咱们能够在模板上增加比方 categories 等自定义内容

source

source 是搁置咱们博客内容的中央，也就是资源文件夹，外面初始只有一个文件夹，_posts（文章文件夹），之后咱们通过命令新建 tags（标签文件夹）还有 categories（分类）页后，这里会相应地减少文件夹。

themes

搁置主题文件包的中央。Hexo 会依据这个文件来生成动态页面。

留神： 后续的命令均须要在站点目录下（即 bd3starblog 文件夹内）应用 Git Bash 运行。
此时 Hexo 框架的本地搭建曾经实现了。咱们来运行一下看看：
命令行顺次输出以下命令

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

浏览器中关上 http://locakhost:4000 或者 http://127.0.0.1:4000
能够看到一个网页，阐明 Hexo 博客曾经胜利在本地运行。

新建文章或页面。

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: 这里啰嗦一嘴如果想用 ![你想输出的代替文字](图片名.jpg) 这种语法来插入图片

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

能够只用 npm install hexo-renderer-marked 命令间接装置，之后在 _config.yaml 中更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就能够在应用 ![](image.jpg) 的形式欢快的插入图片了。

(ps: 要自行搜寻下(可参考) Github Pages 仓库大略步骤就是建设 bd3star.github.io 这个仓库而后空着就能够最初咱们编辑好的 html 页面及 css、js 文件都会放到这个仓库里而后浏览器拜访 http://bd3star.github.io 就能够关上该仓库的 index.html 页面)

在 站点目录 中运行命令行输出 npm install hexo-deployer-git --save
后续博客的批改等等各种性能都须要装置各种插件。这个对博客的帮忙是十分大的。
期待插件装置实现。

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

关上 Github 点击右上角的头像 Settings 抉择 SSH and GPG keys

点击 New SSH key 将之前复制的内容粘帖到 Key 的框中。下面的 title 能够随便点击 add 实现增加。

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

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

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

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

图中也是以用户名为 example 为例。填写实现后保留即可。

命令行输出 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 <filename> 新建文章

hexo s 启动服务器，在本地查看内容

hexo g 生成动态页面

hexo deploy 部署到网站

以上四个步骤。

其实以上命令我感觉就足够了，文档里还有很多性能，但我在理论应用的过程中都还没有遇到。

当初咱们的博客网站是灰常的不美观的能够应用增加一些官网提供的主题这里举荐应用 Next 主题

参考地址

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 包

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

此时的目录构造如下:

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

theme: next

到此，NexT 主题装置实现。下一步咱们将验证主题是否正确启用。在切换主题之后、验证之前，咱们最好应用 hexo clean 来革除 Hexo 的缓存。

首先启动 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 主题。下一步咱们将要更改一些主题的设定，包含个性化以及集成第三方服务。

抉择 Scheme

Scheme 是 NexT 提供的一种个性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，简直所有的配置都能够在 Scheme 之间共用。目前 NexT 反对三种 Scheme，他们是：

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

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

这里自行试一下将第一个正文掉删除第二个正文应用下前面的几个外观而后重启下看下都啥样的

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

PS: 这里阐明下几个重要的门路前面将不再重申

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

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

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

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

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

这里都变成中文配置语言实现

头像显示在右侧区域的

编辑主题配置文件，批改字段 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

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

能够看到增加胜利了然而咱们新增加的还不能点击关上 (点开报错 Cannot GET /tags/) 不要慌，不能获取 tags，创立一个就 OK！

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

重启后能够看到如下成果标签和分类能够点击也能够统计了并且左侧也产生了一点变动

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

在 http://tholman.com/github-cor…://github.com/blog/273-github-ribbons 抉择适合的款式复制代码到 themes/next/layout/_layout.swig，在<div class="headband"></div> 上面：

留神：须手动输出 style 搁置本人想要的地位

<!-- 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 -->

目前 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

关上主题配置文件 _config.yml，搜寻social:, || 之后是在图标库中对应的图标。留神空格就行。

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

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

实现成果

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

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

正文完

前端

发表至：前端

2021-01-13

0

关于前端:Get-和-Post-的区别

关于前端:JavaScript基础入门全解析下

关于前端:syncbinlo主从复制

关于前端:SAP-UI5-Smart-Chart-功能介绍

关于java:你一定需要知道的高阶JAVA枚举特性

关于前端:听说每个程序员都要拥有自己的技术博客站

据说每个程序员都要领有个本人的站！

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 设置语言