18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 基于Hexo和GitHub免费搭建个人博客网站

基于Hexo和GitHub免费搭建个人博客网站

时间:2023-04-23 09:21:01 | 来源:网站运营

时间:2023-04-23 09:21:01 来源:网站运营

基于Hexo和GitHub免费搭建个人博客网站:

1.引言

阮一峰大神说喜欢写博客的人,会经历三个阶段。

第一阶段,刚接触博客觉得很新鲜,试着选择一个免费空间来写。比如CSDN、博客园。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。比如阿里云、腾讯云。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。比如基于Hexo和GitHub免费搭建个人博客网站。
GitHub提供了Pages功能,只要将写好的Markdown文章提交到Github上托管,即可生成独立博客,而且提供几乎不限流量的存储空间,一切都是免费的。一旦搭建好,则只需要负责写文章就行了,不需要定期维护。

Hexo 是一个基于Node.js的静态博客框架。Hexo使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

2.Hexo的搭建步骤

2.1 安装Git Bash

Git Bash(https://git-scm.com/download/win)(复制到浏览器下载软件)是用来管理你的Hexo博客文章,并将文章上传到GitHub平台的工具。

1)具体的安装过程就是一直点击next,直到出现install,点击install,安装完成后点击finish,然后在任意文件夹下右键打开Git Bsah Here输入命令 git--version,查看有没有安装成功。







注意:右键点击Git Bash Here 如果出现下图,则说明安装路径中有中文(软件安装)。





2.2 安装Node.js

Hexo是基于Node.js(https://nodejs.org/en/)(复制到浏览器下载软件)编写的,所以需要安装该软件。从官网下载,然后安装即可,直接选择LTS(长期支持版)版本的。

1)安装完成后,打开管理员命令行输入命令 node-v以及 npm-v,查看有没有安装成功。







2.3 安装Hexo

1)创建一个文件夹Blog,然后进入该文件夹右键Git Bash Here打开。输入命令 npm install-g hexo-cli,至此就安装完成了。

2)安装完成后,还需要初始化hexo,即执行如下命令:

hexo initnpm install3)新建完成后,在Blog文件夹下会出现许多新的文件,目录如下:

4)输入如下命令,然后在浏览器中输入 localhost:4000(本地查看)即可查看用hexo生成的博客了。

hexo ghexo s





使用ctrl+c可以把服务关掉。


5)至此,Blog文件夹下会多出两个目录

注意:出现bash:npm:command not found错误。







网上试了各种办法,最后重启一下电脑就没有问题了。

3.Hexo关联到GitHub

静态页面已经有了,我们还需要将其部署到GitHub上。一来我们搭建博客想要别人可以(以一个链接)访问到我们的博客,二来我们需要有个托管平台,这样我们就可以关注博客内容本身而不是麻烦的管理。

3.1 GitHub创建个人仓库

1)首先注册一个GitHub账号

2)然后点击New,新建仓库







按照下图所示操作后,点击Create repository即创建成功。







3.2生成SSH添加到GitHub

1)在git bash输入如下命令

git config --global user.name "yourname"git config --global user.email "youremail"这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

2)然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"





这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹后可以发现有两个文件(一般位于C盘)。







3)然后在GitHub的setting中,找到SSH keys的设置选项,点击 NewSSH keyid_rsa.pub里面的信息复制进去。







SSH,简单来讲,就是一个秘钥,其中,idrsa是你这台电脑的私人秘钥,不能给别人看的,idrsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

3.3 将Hexo部署到GitHub

1)用Notepad++打开站点配置文件 _config.yml。搜索关键词 deploy。将YourgithubName对应的修改为你的GitHub用户名

deploy: type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master2)这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save3)

hexo n bolgname





然后就会发现在Blog/source/_posts目录下出现一个名为blogname的Markdown文章,用Typora软件打开,文件最上方以 --- 分隔的区域,有用于指定个别文件的变量的Front-matter。我用的几个参数具体包括:title,categories,tags,date。








用Typora打开模板文件Blog/scaffolds/post.md文件,可以进行相应的设置。







4) 然后使用两个命令即可将你写好的文章(位于Blog/source/_posts文件夹下)部署到GitHub。

hexo g # 生成静态文章hexo d # 部署文章hexo s # 可以先从本地(localhost:4000)预览效果,在部署文章到GitHub上注意:

1)输入 hexo d命令后需要你输入username和password。

得到下图就说明部署成功了,过一会儿就可以在 http://yourname.github.io 这个网站看到你的博客了。







2)在上面第三步中提到Front-matter,其中除了我使用的几个参数外,还有其他参数。







3)另外,在上面第三步中提到Blog/scaffolds目录,其实该目录下一共有三个文件,刚刚只提到了post.md,还有另外两个文件。







然后这三个文件是对应三种不同的布局(layout)。

1.hexo n [layout] <tittle> # 之前在创建文章时,layout默认是post,名为title的文章在Blog/source/_posts文件夹下2.hexo n draft <tittle> # draft是草稿的意思,名为title的文章在Blog/source/_drafts文件夹下,hexo s --draft # 草稿写好文章后,可以在本地开启预览hexo p draft <tittle> # 将名为title的文章发送到Blog/source/_posts文件夹下3.hexo new page board # 系统会自动在source文件夹下创建一个board文件夹,以及board文件夹中的index.md,这样你访问的board对应的链接就是http://xxx.xxx/board

4.Hexo的基本页面配置

4.1 hexo基本配置

用Notepad++打开站点配置文件 _config.yml,我们可以在 _config.yml中修改大部分的配置。







1)网站


2)网址

3)其他设置默认就可以了,更多基本设置可以参考Hexo官网配置(https://hexo.io/zh-cn/docs/configuration)内容。

4.2 更换主题

1)系统默认给的主题是 landscape,并且在hexo官网还提供了270个主题,可以先预览选择一个主题。







比如我个人喜欢next主题,那么怎么应用该主题呢。








2)点击右上角从GitHub上面下载下来,然后再把整个文件夹放到Blog/themes目录下。




3)然后将Blog目录下_config.yml文件中的主题改为next。







4)进入Blog/themes/next目录下,里面也有一个配置文件 _config.yml,这个配置文件是修改你整个主题的配置文件。


文件搜索关键词menu。







npm install hexo-generator-searchdb --save # 安装插件修改站点配置文件(位于Blog/_config.yml)中添加内容

search: path: search.xml field: post format: html limit: 10000





文件搜索关键词avatar。将准备好的头像放置在Blog/themes/next/source/images目录下。







文件搜索关键词social。







搜索关键词b2t,将图中两条均改为true。即可得到位于左侧栏的top按钮,可以实时显示阅读进度。







5.Hexo的高端页面配置(比较灵活)

hexo添加各种功能,主要包括

可以自由选择添加,具体的设置可以参考这篇文章(http://visugar.com/2017/08/01/20170801HexoPlugins/)。

6.其他

本文是基于Node.js的静态博客框架Hexo,其他的博客各位如果感兴趣可以参考网络资源进行相应的博客搭建。下面列出了其他常见的静态博客。

6.1静态博客

关键词:免费

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭