使用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/


相关文章
|
6月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
291 3
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
6月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
172 0
|
6月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
78 1
|
6月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
129 0
手把手教你搭建GitHub个人博客网站(下)
手把手教你搭建GitHub个人博客网站(下)
125 0
手把手教你搭建GitHub个人博客网站(下)
|
网络安全
手把手教你搭建GitHub个人博客网站(中)
手把手教你搭建GitHub个人博客网站(中)
159 0
手把手教你搭建GitHub个人博客网站(中)
|
JavaScript 安全 网络安全
手把手教你搭建GitHub个人博客网站(上)
手把手教你搭建GitHub个人博客网站(上)
244 0
手把手教你搭建GitHub个人博客网站(上)
|
1月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
77 3