抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

用到了他们:Vs code / Git / Node.js / hexo主题框架+插件 / Github / Markdown

1 Vs code

编辑代码的软件,我个人用起来感觉非常舒服。点击去官网下载

2 Github

点击去官网

申请账号,创建仓库,其中最重要的一点就是仓库名字,因为我们要搭建的是一个网页,github的要求的仓库名字格式为:

账号名.github.io

这也是你今后博客的网址。

3 Git

主要用来推送代码到码仓。

点击去官网下载

安装的话就跟正常软件一样,当安装到选择默认编辑器时候,选择vs code

如果你要更新Git,也可以在Git Bash中键入代码:

1
git clone https://github.com/git/git

下载完成后,点开Git Bash,键入如下代码设置账户信息。

1
2
git config --global user.name "hahaha"
git config --global user.email hahaha@169.com

在Git Bash中键入如下代码可以查看用户信息。

1
git config --list

在Git Bash中键入如下代码可以查看Git的版本。

1
git --version

4 Node.js

hexo应用的底层依赖,主要用到里边的npm包管理器。

点击去官网下载

在cmd键入如下代码可以查看npm版本。

1
npm -v

5 hexo主题框架+插件

安装hexo,在cmd键入如下代码:

1
npm install hexo-cli -g #-g代表全局包

5.1 博客初始化

在磁盘D建一个blog文件夹

打开cmd,切到blog文件夹下进行博客初始化,具体代码是:

1
d:
1
cd blog
1
hexo init

然后键入如下代码,整合编译生成public网页文件:

1
hexo clean #清理缓存
1
hexo g #编译生成 
1
hexo s #开启本地预览

这时就可在本地的 localhost:4000 端口查看网页了

1
Ctrl + C #结束本地运行进程

5.2 主题美化

点击去hexo官网 可以找你喜欢的主题

切到blog的themes文件夹下,cmd键入如下代码克隆主题

1
git clone 主题网址

blog文件夹下的_config.yml文件(不是主题下的那个),增加或者修改如下代码:

1
theme: hexo-theme-volantis #你下载的主题名字

5.3 博客站点配置发布

需要先安装一个依赖,cmd先切到blog文件夹下,键入如下代码:

1
npm install hexo-deployer-git --save

修改blog文件夹下的_config.yml文件(不是主题下的那个),增加或者修改如下代码:

1
2
3
4
deploy:
type: 'git'
repo: 'https://github.com/yourname/yourname.github.io.git' #仓库地址
branch: master #主分支

在将代码推送到github之前需要安装一个推送的插件

1
npm install --save hexo-deployer-git

将代码推送到github

1
hexo cl && hexo g --d

根目录下的_config.yml文件配置站点

主题目录下的_config.yml文件配置主题

5.4 博文撰写

通过如下代码创建新的md文件,用Markdown编辑(推荐Typora)

1
hexo new page

6 获取SSH key

这一步的目的是不用每次推送代码都输入账号密码。

在cmd键入如下代码:

1
ssh-keygen -t rsa -C yourname@163.com #你的邮箱

然后会在这个位置生成私钥和公钥 C:\Users\user.ssh

用记事本打开公钥,全部复制粘贴到github上的settings / SSH and GPG key 那个位置。

然后在cmd键入如下代码查看是否配置成功

1
ssh git@github.com

7 绑定自己的域名

买域名需要花钱哦,不过看起来好看噻。

增加CNAME跳转解析就好。

8 Markdown 写作技巧

改变文字的字体、颜色和大小

1
<font face="黑体" color=greed size=5>黑体,绿色,尺寸为5</font>

9 图标网址

  1. fas 图标
  2. fa 图标

10 静态资源加速

点击进入jsdelivr官网
这里主要说一下图片资源的加速访问,其实很简单。
首先,在Github上新建一个公开的资源仓库;
然后,在里边新建(用/)或者不新建一个图片文件夹;
接着,上传你的图片资源;
最后,加上jsdelivr的前半段网址。
格式:https://cdn.jsdelivr.net/gh/用户名/仓库名/文件夹名/文件名.png(png/jpg/webp…)

评论