使用hexo在GitHub上搭建个人博客

简介: 使用hexo在GitHub上搭建个人博客

1.安装hexo


什么是hexo


Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。


安装前提


安装hexo之前,需要你的系统里有node.js和Git环境,这两个环境都存在于centos中,如果想要安装较新版本,Git安装在之前的文章中已经解释过,

安装 Node.js 的最佳方式是使用 nvm。


curl:



Wget:



安装完成后,重启终端并执行下列命令即可安装 Node.js。


$  nvm install stable


640.png


安装并启动hexo


$npm install -g hexo-cli


如果没有安装npm,可以通过yum安装


执行hexo -v可以查看hexo版本


640.png


$ hexo initblog        #blog是自己建的文件夹,此命令会在blog目录下建立网站所需要的所有文件。


$ cd blog


$ npm install        #
安装依赖包


640.png


$ hexo g       #生成静态文件


$ hexo server   #启动本地hexo服务器,默认是4000端口,如果要修改端口,可以在命令后面加上-p $port,$port为你要修改的端口


640.png


在浏览器输入http://localhost:4000/即可访问


2.GitHub上的配置


添加公钥到GitHub


[root@docker blog]#ssh-keygen -t rsa -C “your_name@email.com”


640.png


登录GitHub,在你的头像里点击“Settings”,再点击SSH and GPG keys,选择New SSH key,把刚才生成的公钥复制到key的框里,title字段可以随便填写,公钥放置在/root/.ssh/id_rsa.pub文件里


640.jpg


创建GitHub仓库


还是点击你的头像,单击‘Your repositories’再单击‘New’就可以创建一个仓库,如下图所示,库名填自己的用户名,否则可能会出现意想不到的错误


640.jpg


修改配置文件


编辑blog下的_config.yml文件,repository地址为你刚才创建的仓库地址


640.png


执行:


hexo generate


hexo deploy


这里我执行hexo deploy报错,ERROR Deployer not found: git,解决方法安装一个git-hexo-deployer插件


就行了,安装命令:


npm install --save hexo-deployer-git


查看GitHub仓库发现代码已经推上去了


640.jpg


完成安装查看博客


接下来访问地址https://wahaha5354.github.io/就可以看到了


640.jpg


3.Hexo博客配置


修改博客默认主题


如果不喜欢当前的主题,可以从https://hexo.io/themes/中选择适合自己的主题,这里我找了一个next主题,先把它下载下来


[root@docker blog]# git clone https://github.com/theme-next/hexo-theme-nextthemes/next


编辑hexo的配置文件_cinfig.yml,将theme: landscape修改成theme: next

然后执行


hexo generate


hexo deploy


每次修改完都要运行这两个命令,可以看到我的主题已经变了



640.png


修改网站内容


编辑主配置文件_config.yml,在配置文件开头修改网站内容


title: WangEr's Blog     #网站标题


subtitle: 生活不止眼前的苟且,还有远方的西洋参和鹿茸    #网站副标题


description: 记录生活的点滴,Linux运维学习笔记      #网站描述,主要用于SEO,告诉搜索引擎一个关于您站点的简单描述


author: wanger            #作者


language: zh-Hans         #网站使用的语言


timezone:                 #网站时区。Hexo 默认使用您电脑的时区。


修改完成之后执行


hexo clean


hexo g


hexo d


修改完成主页如图所示


640.png


新建博文


要创建新帖子或新页面,可以运行以下命令:


$ hexo new [layout] <title>


[layout] 为可选,不写默认为post. /source 目录下的文件夹名称即为 layout 名,你可以通过编辑default_layout设置来更改默认布局_config.yml


 

布局(layout

存储路径

说明

post

source/_posts

默认,可以直接发布

page

source

source下新建一个文件夹

draft

source/_drafts

新建文件将保持到_drafts中,其实就是写博客的草稿


这里我新建了一个测试页


Hexo new test


然后进入source/_posts/test.md文件编辑文章


640.png


之后执行hexo clean


hexo g


hexo d


进入站点就可以看到新建的文章了



640.png


hexo博客的搭建就完成了,hexo博客的优点之一就是不需要vps,关于hexo的更多内容可以查看官方文档https://hexo.io/zh-cn/docs/


相关文章
|
12天前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
25 3
|
4月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
1月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
32 1
|
5月前
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
74 1
|
4月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
50 0
|
9月前
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。
|
8月前
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
9月前
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
61 0
Hexo+GitHub搭建个人博客
|
存储 JavaScript 前端开发
hexo+github搭建博客(超级详细版,精细入微)
hexo+github搭建静态博客,以及matery主题安装、个性化修改、SEO优化等
6669 0
|
缓存 数据库 Windows
github+hexo搭建博客
引言     之前用阿里云弹性web托管采用wordpress搭建的个人博客,经过我使用一段时间之后发现存在很多问题: 网站的响应速度非常慢,估计打开主页需要3-4s的时间,我经过搜索发现很多人都有这样的问题,所以应该不是wordpress的锅,而是阿里云弹性web托管的问题,毕竟我买的时候一年只要几百块,而且还是最便宜的经济版(内存128M+2G网页空间+4G流量+1G数据库)。
2375 0