首页 / 汽车 / 汽车导购 / 正文

优秀个人博客(教程 - 一文搭建你的第一个免费专属博客)

放大字体  缩小字体 来源:泸州酒店 2026-04-17 17:24  浏览次数:3

和大多数搭建个人博客的博主一样,我之所以搭建个人博客的主要原因也是因为不希望受制于各大内容分享平台,生怕有朝一日被安上一个“莫须有”的罪名,所有辛苦创作的内容都付之一炬。

最终,我还是选择了后者,主要原因有如下几点:

  • 容易搭建
  • 操作和管理简单
  • 免费
  • 界面美观

本文就详细的介绍一下通过Github Page结合hexo搭建一个完整的个人博客。

域名-GithubPage

注册Github Page的过程如下:

首先打开链接https://github.com/join?source=header-home,注册github账号,然后登录github。

点击右上角"+",选择New repository,填写Repository name,这个就是可以直接访问的域名,然后点击create repository即可。

hexo是一个轻量级的博客管理系统,这里要注意,hexo是一个管理系统,它负责新建、部署等博客管理工作。如果使用过git做版本控制的话应该很容易理解,它可以类比为git,可以通过一些命令生成静态网页、把静态网页推送到远程仓库。

由于hexo是基于node.js制作的一款博客管理工具,所以要按照hexo就需要事先安装node,http://nodejs.cn/download/

$ npm install -g hexo-cli

安装hexo之后需要对hexo进行初始化,首先需要新建文件夹,进入到新建文件夹之后再进行初始化,

$ mkdir hexo$ cd hexo$ hexo init

最后可以得到如下目录,

  • 文章
  • 关于
  • 分类
  • 标签

hexo使用

记住上述命令就可以进行日常的个人博客维护工作。

主题-Next

hexo默认的主题是landscape,我们可以修改为我们自己喜欢的主题,目前hexo有很多适配的主题,其中比较常用,也是本文推荐的就是Next主题。

克隆Next主题

这样在~/hexo/themes路径下就会有一个next文件夹。

克隆next主题之后需要修改博客根目录_config.yml文件,找到theme字段修改成next即可,

# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next

next主题包含多个样式,我们可以根据自己的喜好进行修改,修改样式的文件在~/hexo/themes路径下,名字同为_config.yml,需要注意,这和前面提到的不是同一个文件,前面的配置文件是博客管理系统hexo的配置文件,这里的是主题的配置文件。

# Schemes# scheme: Musescheme: Mist# scheme: Pisces# scheme: Gemini

必备功能

可以看出,目前为止博客还比较“干净”,很多必要的功能都没有,例如菜单栏不完整,没有搜索框,此外,评论、阅读量、友情链接这些重要的功能都没有,下面就来一一介绍一下这些功能的配置过程。

菜单栏

其中about是关于,tags是标签,其他的站点之类的也可以根据自己的喜欢进行添加。

搜索框是一个博客必不可少的部分,当更新的文章数量逐渐增加之后,为了方便访问者阅读或快速定位目标文章,我们需要给它添加上一个搜索功能,hexo添加搜索框的方式如下,

然后,在站点配置文件添加下面内容,

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

修改后重新生成静态网页,预览一下即可,

访问量、阅读量

评论功能

由于评论内容需要耗费存储资源,因此需要首先注册LeanCloud获取存储引擎,然后复制appid、appkey,然后打开主题配置文件

valine:  enable: true  appid: Ikslsdjflsjdnclskdfjlskdklalla # your leancloud application appid  appkey: Kokkall09kkssmmcsslla # your leancloud application appkey  notify: false # mail notifier , https://github.com/xCss/Valine/wiki  verify: false # Verification code  placeholder: 请在此输入您的留言 # comment box placeholder  avatar: mm # gravatar style  guest_info: nick,mail,link # custom comment header  pageSize: 10 # pagination size

分享功能

首先,修改主题配置文件,

# Baidu Share# Available value:#    button | slide# Warning: Baidu Share does not support https.baidushare:  type: button  baidushare: true

然后,为了解决百度分享不支持https的问题,需要进一步的修改,要先访问下方链接,

把static文件夹下载到themes\next\source目录下,

修改前:

.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

RSS

首先,安装RSS订阅插件,

$ npm install hexo-generator-feed --save

最后,修改主题配置文件,添加下面字段,

rss: /atom.xml

在我们的博客中,有时需要添加直达github、知乎、E-mail等社交工具的链接,也需要一些链接到其他网站的友情链接,下面来介绍一下怎么添加社交、友情链接。

然后,搜索Blog rolls配置友情链接,

# Blog rollslinks_icon: linklinks_title: linkslinks_layout: block#links_layout: inlinelinks:  Title: http://example.com/

福利

我在公众号分享了Python、机器学习、计算机视觉、强化学习等领域相关的学习资源、电子文档。此外,还整理了一些高效的实用工具,如果需要可以关注公众号【平凡而诗意】,回复相应关键字获取~

打赏
0相关评论
热门搜索排行
精彩图片
友情链接
声明:本站信息均由用户注册后自行发布,本站不承担任何法律责任。如有侵权请告知立立即做删除处理。
违法不良信息举报邮箱:115904045
头条快讯网 版权所有
中国互联网举报中心