Hexo搭建博客

学习使用hexo搭建自己的博客

搭建的目的:
1.是为了督促自己的学习
2.是加深对计算机知识的理解
3.写笔记本上视图看着不舒服

相关知识点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
├── .github            #git信息
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-Hans.yml #简体中文
| └── zh-tw.yml #繁体中文
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom #可以自己修改的模板,覆盖原有模板
| | ├── _header.swig #头部样式
| | ├── _sidebar.swig #侧边栏样式
| ├── _macro #可以自己修改的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── uploads #添加的文件
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道

1.自己搭建的过程经验和总结(写的不好勿喷):

可以参考的链接:https://zhuanlan.zhihu.com/p/26625249

2.准备Git 和 Node.js这两个工具

Git: https://git-scm.com/
Node.js: https://nodejs.org/en/
安装过程不会的自行百度: https://www.baidu.com/

3.开始创建:(打开Git Bash,下面的命令都是在Git Bash中输入)

  1. 首先要有一个github的账号,连接为: https://github.com/,然后去创建仓库,仓库名命名格式为:你的用户名.github.io
  2. 配置SSH:输入命令 ssh-keygen -t rsa -C “你的邮件地址” # 然后连续回车。
    将C盘中的路径”C:\Users\你的用户名.ssh\id_rsa.pub”的内容复制下来,打开之前创建好的GitHub,设置->SSH and GPG keys->New SSH key,粘贴到此处确定。
    然后再bash中输入: ssh -T git@github.com
    这个命令是用来测试SSH是否配置好,看到You’ve successfully authenticated, but GitHub does not provide shell access.
    则说明配置好了,否则无法使用hexo d

4.安装Hexo

输入命令: npm install -g hexo-cli # install可以简写为i

5.初始化Hexo

在你想要放置你的Blog的地方创建一个文件夹(比如使用Blog)
输入命令: hexo init Blog # Blog可以修改成其他的名字
找到这个Blog文件夹,进入

6.命令:

hexo clean
hexo g # 生成 此条和后一条可简写为 hexo s -g
hexo s # 预览

g是generate的缩写,s是start的缩写,d是deploy的缩写
hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容。
在输入“hexo s”之后服务会启动(可以通过ctrl+c来停止),此时我们在浏览器输入“localhost:4000”会看到如下情况:

此时就表示博客搭建成功了,但是这个主题不太好看,我们稍微设置一下主题。

7.修改主题(链接: https://hexo.io/themes/)

继续在Git Bash输入“git clone https://github.com/iissnan/hexo-theme-next themes/next”命令
完成之后在根目录下打开“_config.yml”文件,修改主题信息(将landscape修改为next)
PS:此处安装的是next主题,如果喜欢其他主题,可以自行安装其他主题
在Git Bash输入以下命令,然后在浏览器输入“localhost:4000”来查看效果:

此时可以看到next主题默认的界面风格,这个是最简洁的,但还是不好看,我们打开“站点根目录/themes/next/_congig.yml ”文件,修改next主题的配置信息,如图:

8.安装Hexo扩展

npm install hexo-deployer-git –save
npm install

9.部署

简单理解就是以后你写的东西要相传到网上和别人分享就要通过部署

上传到GitHub Pages

上传之前,打开站点配置文件_config.yml,位于站点根目录下,修改最后一部分为如下部分。

1
2
3
4
deploy:
type: git
repository: git@github.com:weakdouqing/weakdouqing.github.io.git # 将 weakdouqing 修改为你的GitHub用户名
branch: master

上传到GitHub Pages。

此时是已经修改过的样式,至此,用Hexo搭建的本地博客已经完成

一下推荐两个大佬的博客:
当然,如果可以的话,还是希望你们能看我自己的博客过程啦~~~

搭建经验的分享

众所周知,学习的过程中如果有老师的指导,肯定要方便不少
这次搭建的成功,首先要感谢大佬(手动@亦往沧劫)
大佬博客链接:https://blog.todest.cn/

修改并完善博客内容

看下一篇文章:https://weakdouqing.github.io/2019/06/22/next主题优化(一)/#more

推荐博客:https://blog.csdn.net/qq_35117024/article/details/81390780
另一个:https://blog.csdn.net/lewky_liu/article/details/81277337

---------------- The End ----------------
0%