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

32次阅读

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

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

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

Hexo 简介

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

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

效果图

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

1. Hexo 装置

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

1.1 初始化

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

空白处右键点击Git Bash here

1.2 装置

设置 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 框架的本地搭建曾经实现了。咱们来运行一下看看：
命令行顺次输出以下命令

1.3 运行

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

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

1.4 扩大

新建文章或页面。

hexo new <layout> "title"

这里的 <layout> 对应咱们要增加的内容，如果是 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 文件夹

关上 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 的用户名。

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

进入博客文件夹，找到 _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 为例。填写实现后保留即可。

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://&lt; 用户名 >.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 包


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

此时的目录构造如下:

3.2 启用主题

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

theme: next

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

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 后面正文 # 去除即可。

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

3.5 设置 语言

编辑 站点配置文件及主题的配置文件，将 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重启服务 查看是否失效

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

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


3.7 增加分类

批改主题配置文件下的 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 文件的内容 前面省略一大堆内容

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

3.8 个性化定制

增加 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 -->

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:, || 之后是在图标库中对应的图标。留神空格就行。

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

3.11 设置网站图标

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

实现成果

更多功能

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

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

正文完
前端
发表至： 前端
2021-01-13
 0
关于前端:Angular配置http请求
关于前端:2020年腾讯短链urlcn官方免费接口调用源码免费API接口调用
关于前端:为什么越来越多的电商人选择建站
Git-commit-多行信息提交