【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

简介: 【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

首先看一下Hexo的博客的效果。

49fb1859a5084873b2e418b92f867707.png


1、下载安装Git


Git 是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。

4af0891219324f15b30a28977b4cdb7d.png

Git 的安装步骤和使用方法

https://lingxw.blog.csdn.net/article/details/125613870


这里是我之前写的Git 的安装步骤和使用方法。

6b854d1223574eac853f5074be95c75d.png

安装完成之后,右键鼠标有Git bash 表示安装成功。


2、下载安装Node.js


Node.js 在设计上类似于 Ruby 的 Event Machine 或 Python 的 Twisted 之类的系统。但 Node.js 更深入地考虑了事件模型,它将事件循环作为一个运行时结构而不是作为一个库来呈现。在其他系统中,总是有一个阻塞调用来启动事件循环。通常情况下,要执行的行为是通过脚本开始时的回调来定义的,然后通过 EventMachine::run() 这样的阻塞调用来启动服务器。而在 Node.js 中,没有这种启动事件循环的调用。Node.js 在执行输入脚本后直接进入事件循环,当没有更多的回调要执行时,Node.js 就会退出事件循环。这种行为就像浏览器的 JavaScript 一样 —— 事件循环对用户是隐藏的。


7e475221076848288d708fc9a1e60b3d.png

这里我们下载长期维护版,比较稳定。

输入 node -v 表示安装完成。

8d8ba5c9e0d148c9a6c7ef86ba40ec49.png

3、使用Hexo进行博客的搭建

Hexo 是一个快速、简洁且高效的博客框架。

f796b3783ec840ec9fc042c4bca02687.png

并且拥有很多主题。

1697b3c353ba472197fdcd321eb05119.png

首先我们需要新建一个文件夹来保存博客的内容。

4bfe032c0b40471280f06d3c60169862.png

在文件夹中右键进行Git bash;

617d5b5163e243198d8c4913142a14f8.png

依次输入下面的命令;

npminstallhexo-cli-g

52b31f35f3f14f5da0fb2170b83642d2.png

hexoinitblog

8036ca0d9a1847e19f6204cc3b84bf5d.png

cdblog
npminstall

e797be127fec4e39844892de9620dc98.png

hexos#或者hexoserver

0fb594ba53ca4386af3cfc5642a8c064.png

我们输入网址:http://localhost:4000/

image.png

我们通过hexo new "xxxxxxxxx" 生成第一个博客。

9e83c74d275a42de8d25905dddbf1a6e.png

这时我们查看目录source/post下面:

dbd1dce6a45a40a089de07ca1a94e5d9.png

对中国md文件进行修改,就可以得到我们需要的博客。

image.png


4、更改博客样式


Themes | Hexo

image.png

我们以这个为例显示如何切换样式。

85c13414e84941828dbccdfeb648d577.png

打开这个样式对应的GIthub链接。

0b2bc4d57ada468eb27d4b5feed9a4f3.png

根据对应的步骤进行安装使用。

1、hexo init your-awesome-blog 初始化您的 Hexo 站点目录(已经完成则可以忽略)

fa2243d72ce24b5b80d41d568df20a6c.png

2、进入您的站点目录,使用 npm install --save hexo-theme-kratos-rebirth 或 yarn add hexo-theme-kratos-rebirth 安装主题。如果您有调整代码的需求,您也可以进入站点的主题目录,使用 git clone 本仓库来使用。

925e6e59867b415f978a423937c424a5.png

ed22815f66c64a07b652ac0794a155ff.png

3、修改站点目录下的 _config.yml 站点配置文件,将默认的 theme: landscape 修改成 theme: kratos-rebirth。

942d2a98ad324ed7a27349ccb66d843c.png

#Extensions##Plugins: https://hexo.io/plugins/##Themes: https://hexo.io/themes/#theme: landscapetheme: kratos-rebirth

运行之前要先关掉之前的;

2074d0d656f849eaa1ad6473e1b400e0.png

#生成网页hexog

5d4a1f0653194d53abb98e2e030daa1b.png

#开始服务hexos

2bab1323237b4584834006cd437eaf25.png

修改样式成功:

image.png

然后我们可以根据自己的需求进行修改界面。


5、将博客上传到Gitee


具体的配置参考之前的第一篇博客。

572bf08b7ae6497db8ab87e4e67b6197.png

修改文件的最后三行。

deploy:
type: 'git'repository: git@gitee.com:lingxw123/lingxw123.git

然后输入:

d052ba688ece47889ac62d3bf50677b8.png

输入hexo d 直接部署:

hexod

然后就可以在Gitee上看到已经上传了。

a009010e72664e668e5f55098887b5cf.png

然后我们通过服务中的Gitee Pages 就可以通过gitee的网站链接来打开博客。

7add3d6b5e254fa6a4db1a14dac5ddb6.png

点击强制使用HTTPS,之后启动。

cf0c0835c02b445abd92d6e0bf29dca6.png

然后就可以通过 https://lingxw123.gitee.io   来访问个人博客。

下载.gif

如图:

下载 (1).gif


6、更新博客

这两个命令比较常用。

a3008a136d7b4d4f9e5eb8334c4f770e.png

本地查看博客没有问题之后,

通过hexo d 进行博客的上传到Gitee。

目录
相关文章
|
1月前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
7月前
|
JavaScript
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
|
11月前
|
JavaScript Go Cloud Native
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 |Go主题月
经过前面两弹的介绍,相信大家对图床都不陌生了吧,但是小魔童觉得这样做法还是不方便,使用 github的仓库来存放图片,如果不能上外网的话是不能展示图片的,自己可以上外网还不行,需要别人上外网才可以看到我文章中的图片,这也太难了
107 0
|
12月前
|
存储 缓存 前端开发
一看就会的Next.js Pages Router版 -- Getting Started(二)
一看就会的Next.js Pages Router版 -- Getting Started
165 0
|
12月前
|
Web App开发 缓存 前端开发
一看就会的Next.js Pages Router版 -- Getting Started(一)
一看就会的Next.js Pages Router版 -- Getting Started
176 0
|
JavaScript 网络安全 开发工具
基于Hexo+Node.js+github+coding搭建个人博客——基础篇
附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My Blog Trip — Power By Hexo 记录一下搭建的基本过程以及遇到的一些问题,仅供参考 = =废话不多说,进入主题 Hexo博客搭建的基础大致流程为: 安装Node.
2385 0
|
JavaScript 开发工具 git
用Node.js和GitHub Pages搭建博客 0504
Node.js +GitHub Pages搭建静态博客;我好像总是犯傻;以及其他
1984 0
|
JavaScript
hexo —— 简单、快速、强大的Node.js静态博客框架
hexo是一款基于Node.js的静态博客框架。目前在GitHub上已有1375 star 和 219 fork。 特性 风一般的速度 Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成。
1295 0
|
JavaScript 前端开发 HTML5
Hexo - 快速,轻量,强大的 Node.js 博客框架
  Hexo 是一个快速,轻量,强大的 Node.js 博客框架。带给你难以置信的编译速度,瞬间生成静态文件;支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件;只需要一个命令就可以部署到 GitHub Pages,Heroku 或其他网站;拥有强大的插件系统,可以轻松扩展。
1139 0