用GitHub和Hexo搭建个人博客

很久前就想利用GitHub来搭建一个个人博客了,今天就琢磨了一下搭建方法,在这里写出来以供他人参考~

一、简介

Hexo: Hexo 是一款基于Node.js、快速、简洁且高效的博客框架,Hexo 使用 Markdown解析文章,在几秒内,即可利用各式主题生成静态网页

NodeJs Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统

Git Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理

GitHub GitHub是一个代码托管平台和开发者社区,开发者可以在GitHub上创建自己的开源项目并与其他开发者协作编码

二、准备工作

这里需要先安装两个软件 (1)Git Git官网下载地址:https://git-scm.com/download/ 安装与使用教程可以参考我的另一篇文章:Git的使用教程

(2)NodeJS 官网下载地址:https://nodejs.org/en/

这里写图片描述

我的软件安装路径是:C:\nodejs

一路点击下一步即可

这里写图片描述

安装完成后检查是否有自动添加了环境变量,没有的话需要手动设置

这里写图片描述

(3)注册一个GitHub账号,这个不必多说吧~

三、本地部署

我的电脑是Windows平台 打开CMD,即命令提示符,进入NodeJS的安装目录

这里写图片描述

使用命令行安装Hexo,这个耗时可能会稍微长点,需要等等

npm install -g hexo

这里写图片描述

创建一个文件夹命名为blog并打开 名字可以随个人喜好取,不过最好只包含英文字符

mkdir blog && cd blog

这里写图片描述

然后再依次执行以下命令

初始化

hexo init

安装依赖包

npm install

生成静态页面

hexo g

启动本地服务,查看效果

hexo s

这里写图片描述

这里写图片描述

此时博客应该已经搭建成功了,可以看到CMD提示说Hexo已经运行在“http://localhost:4000/”了,查看效果

这里写图片描述

可以看到网站样式还是挺好的,当然,此时网站还只是部署在本地

打开\nodejs\blog\source\_posts文件夹,可以看到一个hello-world.md文件,即网站上显示的文章,用Markdown格式书写

四、部署到GitHub

首先,登录你的GitHub账号,新建一个仓库

我的GitHub账户是:https://github.com/leavesC

这里我新注册了一个GitHub账户用来演示,名为czyhexo

仓库的名字的格式必须为:用户名+.github.io

这里写图片描述

点击按钮创建,选中Settings进入设置界面 选中“启动页面自动生成器”按钮

这里写图片描述

设置页面信息

这里写图片描述

选择主题然后发布即可

这里写图片描述

此时,访问https://czyhexo.github.io/,即可看到刚才发布的文章了

这里写图片描述

五、推送本地文件

回到刚才建立的仓库界面,复制推送地址:https://github.com/czyhexo/czyhexo.github.io.git

这里写图片描述

进入C:\nodejs\blog文件夹,打开_config.yml文件

修改最下边一行,并添加两行命令,注意之间的空格

这里写图片描述

回到CMD窗口,如果之前的状态还没退出,可以按ctrl+c,输入y确定退出

依次输入以下命令

npm install hexo-deployer-git --save

重新生成静态页面

hexo g

清理并推送到GitHub

hexo clean && hexo d

注意,此处需要你电脑本地的Git已经与GitHub账户绑定,这样才有权限可以推送文件,绑定方法可以参考我上边所说的Git教程

这样,重新访问https://github.com/czyhexo/czyhexo.github.io.git,就可以看到页面已经与本地主题一样了,且文章也是相同的

六、更换主题

我要使用的主题在GitHub的地址是:https://github.com/litten/hexo-theme-yilia

打开主题文件夹:C:\nodejs\blog\themes 打开Git,下载该主题

git clone https://github.com/litten/hexo-theme-yilia.git

等下载完成后,可以看到文件夹下多了个文件,将之重命名为:yilia

这里写图片描述

修改C:\nodejs\blog文件夹下的_config.yml文件,将theme值修改为:yilia,注意空格,保存退出

这里写图片描述

再依次执行以下命令

重新生成页面

hexo g

推送到GitHub

hexo d

以上更换主题的修改是在我有在使用的GitHub上,所以访问的地址是:https://initobject.github.io/ 效果如下:

这里写图片描述

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WebHub

Linux下搭建HEXO博客教程

参考 https://segmentfault.com/a/1190000002632530

836
来自专栏java思维导图

提高效率,eclipse上你可能不知道的技巧

一张思维导图 ? 公众号回复“eclipse技巧”可下载源导图 1、控制台(console )日志输出另保存 经常会遇到这种情况,习惯性的清掉控制台上的输出日志...

2686
来自专栏虚拟化云计算

libvirt-TLS加密

TLS(Transport Layer Security Protocol),即安全传输层协议,其核心是加密两台计算机之间的通信。libvirt中使用T...

2927
来自专栏小狼的世界

php_network_getaddresses: getaddrinfo failed

712
来自专栏MasiMaro 的技术博文

如何利用git shell提交代码到github

在很早之前我根据找到的一些资料以及自己的实践总结了一篇如何将VS2015上的代码上传到GitHub上,后来我发现有小伙伴私信我,说跟我上面写的不一样,但是那段时...

432
来自专栏linux系统运维

Nginx负载均衡,ssl原理,生成ssl密钥对,Nginx配置ssl

1804
来自专栏程序小工

【Git】修改已经提交的commit内容

通过 Git 进行版本管理时,对于已经提交但没有 push 的 message 信息,发现提交信息填写错误后,如何进行修改? 对于已经 push 的 mess...

1522
来自专栏DeveWork

移除 WordPress 后台插件管理的“编辑”与“停用”功能

出于某些目的(如多用户博客防止一些小白乱搞),需要禁止(删除/移除)WordPress后台插件管理的 “编辑” 与 “停用” 功能,具体是WordPress 后...

1595
来自专栏编程坑太多

『中级篇』数据持久化之bind Mounting(35)

PS:bind mount 需要指定 host 文件系统的特定路径,这就限制了容器的可移植性,当需要将容器迁移到其他 host,而该 host 没有要 moun...

571
来自专栏Java修行之道

ubuntu16.04下安装mysql,并开启远程访问

grant all privileges on *.* to 'user'@'%' identified by 'password' with grant op...

991

扫码关注云+社区