搭建Hexo博客笔记(一)

一.初识Hexo;

快速、简洁且高效的博客框架,官网:https://hexo.io/zh-cn/是这么介绍的,嗯,有道理,那么我就不赘述了,想要更透彻了解的可自行查阅。

但是要知道它是个博客框架,有很多好看的主题https://hexo.io/themes/可以应用在自己的博客上,这篇文章要讲述如何用hexo写博客并部署到github上就好了。

二.安装前提;

安装 Hexo 相当简单,只需要先安装下列应用程序即可:

Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
Git
如果您的电脑中已经安装上述必备程序,那么恭喜您!你可以直接前往 安装 Hexo 步骤。

三.安装Hexo;

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

进阶安装和使用
对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。

$ npm install hexo

四.搭建博客;

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

这里我在J:\WEIXIN\Blog下新建了文件夹博客日记作为演示
1.打开cmd命令行或Windows Power Shell

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS C:\Users\Administrator> J:

2.切换到J盘文件夹目录

PS J:\> cd J:\WEIXIN\Blog\博客日记

3.初始化hexo博客文件

PS J:\WEIXIN\Blog\博客日记> hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
INFO  Start blogging with Hexo!

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
4.启动Hexo $ hexo s

PS J:\WEIXIN\Blog\博客日记> hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

5.浏览器输入:http://localhost:4000,可查看到默认生成了一篇博文:

6.新建一篇博文
ctrl+c断开刚刚的链接,新建一篇博文:hexo n “发布第二篇个人博客”

PS J:\WEIXIN\Blog\博客日记> hexo n "发布第二篇个人博客"
INFO  Validating config
INFO  Created: J:\WEIXIN\Blog\博客1\source\_posts\发布第二篇个人博客.md
PS J:\WEIXIN\Blog\博客日记>

5、接下来就是更改博文内容,可以选择用命令行,也可用开发工具,我直接使用记事本打开该文件了,找到相应的位置,做修改即可
在这里插入图片描述
6、同样在博客日记文件下: 清理:hexo clean 生成:hexo g 启动:hexo s

PS J:\WEIXIN\Blog\博客日记> hexo cl
..
PS J:\WEIXIN\Blog\博客日记> hexo g
..
PS J:\WEIXIN\Blog\博客日记> hexo s

在这里插入图片描述
完成!

五.部署到Github上;

1、登录github:https://github.com,没账号的新建一个,新创建一个仓库New repository,仓库名必须为:昵称.github.io:,输入描述,创建:
在这里插入图片描述
在这里插入图片描述
2、命令行下,ctrl+c,退出命令,仍然在博客日记目录下,安装git部署插件:npm install hexo-deployer-git --save

PS J:\WEIXIN\Blog\博客日记> npm install hexo-deployer-git --save

3、更改博客日记文件夹下,_config.yml的配置,我直接用记事本了,用命令行修改也可以:

repo为第一步创建的git仓库

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Drfengling/Drfengling.github.io.git
  branch: main

4.回到命令行部署到远端

PS J:\WEIXIN\Blog\博客日记> hexo d

中间会让输入github密码,输入即可,后续部署完成,即可访问你的远端地址:
https://Drfengling.github.io
###五.Hexo主题的使用;
1、选主题:https://hexo.io/themes/,有很多主题可供选择,也可使用网友推荐的自己喜欢的主题,有相应的预览、github地址:

我这里使用的是:Kratos-Rebirth

有相应的安装方法:

PS J:\WEIXIN\Blog\博客日记> git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora

修改Hexo配置文件 _config.yml 主题项设置为diaspora

...
theme: diaspora
...

3、清理、启动:

清理:hexo clean 生成:hexo g 启动:hexo s

PS J:\WEIXIN\Blog\博客日记> hexo cl
PS J:\WEIXIN\Blog\博客日记> hexo g
PS J:\WEIXIN\Blog\博客日记> hexo s

在本地刷新预览http://localhost:4000之后,看到主题效果,可根据自己需要做相应修改即可。

4、推至远端:

ctrl+c退出上一步命令,然后推至远端:

PS J:\WEIXIN\Blog\博客日记> hexo d

刷新查看:https://Drfengling.github.io
以上就是搭建个人博客的全过程了,也可以购买自己的域名,放置自己的域名下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值