哟呵,Github 免费从 0 到 1搭建个人博客网站

之前有朋友说想要搭建自己的博客玩玩,于是就有了这篇:
使用 wordpress 从0到1搭建一个属于你自己的博客网站
后来有些朋友觉得略麻烦,又要整服务器整域名,又要搭建各种 PHP、Mysql 环境啥的,就单纯的想写写文章装个x,能不能不整那么多花里胡哨的东西?
好巧不巧,挺久之前我就写过如何搭建以及使用 Github pages 来托管静态博客网站的教程,姨妈巾式的范侧漏那种:

目录

  1. 使用 Hexo 搭建个人网站
    1. 开始搭建
    2. 优化博客主题
    3. 你的第一篇博客文章
    4. 打上标签
    5. 打上分类
    6. 添加评论功能
    让全世界的人都认识你
    1. 创建 Github pages 仓库
    2. 安装 hexo-deployer-git
    3. 配置你的 Git
    4. 推送你的网站到 Github 上
    5. 访问你的网站
    6. 完事,开启你的装x之旅
    还想要点个性?
    1. 购买域名
    2. 如何绑定域名
    3. 完事
    那么接下来就分享给你,希望对你有帮助。
    (疯狂暗示三连)

    使用 Hexo 框架来搭建个人网站 

    这两天我重新整理了一下自己的 Blog ,因为我之前用的 Octopress 框架,有些年头了,一些主题和插件并不是很多。
    后来对比了几个框架,发现 Hexo 不错,和 Octopress 差不多,也是可以用 Markdown 写文章,然后生成静态网站,Hexo 主题丰富一些。
    Hexo 是基于 nodejs 的,搭建起来很简单。那么接下来就说说如何从 0 开始使用 Hexo 搭建个人博客吧。
      开始搭建 
    1. 因为 hexo 是基于 node 框架的,所以呢,我们首先需要下载安装node,下载地址:https://nodejs.cn/
    2. 安装完之后,我们打开命令窗口,输入 node -v ,如果返回下图所示,那么就说明你安装 node 成功了。
    node 版本
    1. 安装成功后,我们在命令行窗口运行如下命令来安装 hexo:
      npm install hexo-cli -g
    2. 初始化博客目录:
      hexo init xxx.github.io (这里的xxx换成你自己的英文名)
    3. 初始化完成后,我们就进入我们的目录:
      cd xxx.github.io
    4. 安装
      npm install
    5. clean一下,然后生成静态页面
      hexo clean
      hexo g
    g 就是generate ,生成的意思
    1. 把你的网站运行起来
      hexo s
    s 就是server ,在服务上运行的意思
    1. 打开你的浏览器,输入 localhost:4000 。自此,你的个人网站就这么速度的搭建起来了!
    hexo

    优化 hexo 博客主题

    进入你的网站目录,打开 _config 文件,这个文件是用来配置你的网站信息的。

    这里列出我的简单配置,具体可以看这个Hexo配置文档:https://hexo.io/docs/configuration.html
    title: fxxkpython
    subtitle: 小帅b
    description: xx的个人博客,主要涉及到编程(Java,Python,Linux等),个人提升学习,视频教程
    keywords: java,python,教程
    author: wistbean
    language: zh

    选一个Hexo主题

    刚搭建完的网站,是不是觉得有点丑,不符合你的漂亮的脸庞?反正我是这么觉得的,那么就选一个主题来装饰一下吧,在这里可以选择你要的主题,知乎答主们推荐的hexo主题大全:https://www.zhihu.com/question/24422335

    下载Hexo主题

    慢慢挑,选择好了你的主题之后,就可以下载主题资源了,比如我这里选择一个 NEXT 主题来演示一下,在你的目录中输入以下命令:
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    这里主要就是将主题下载到我们的themes目录下。

    配置主题

    主题下载完之后,在你根目录下的 _config.yml 文件中,修改 theme 为你的主题名字:
    theme: next

    重新生成和运行

    hexo g
    hexo s

    访问一下看看,是不是比之前好看多了?

    hexo next主题

    hexo博客的第一篇文章,打上标签和分类

    你已经把你的网站打扮的漂亮大方简洁惹人爱了,那么接下来就要好好去写内容了,内容才是重要的。

    两种方式来新建你的博文

    命令形式

    在你的 blog 目录下使用如下命令:
    hexo new article (这里的article写上你的文章的名称)
    输入这样的命令之后你的 source/_posts 下就会生成一个 article.md 文件,在这个文件下就可以写上你的博客内容了。
    用 Markdown 的语法去写。

    直接新建方式

    直接点的方式就是直接在source/_posts新建一个 Markdown 文件,其实和命令形式是一个道理,只不过命令形式用了命令来创建。推荐使用命令的方式,毕竟 Geek 一点。

    给你的文章打上标签

    在你的博客中打标签能让你的文章方便检索。
    hexo打开标签功能:
    hexo new page tags
    这时候你的 source/ 下生成 tags/index.md 文件,我们将其打开,然后把它改成:
    type: "tags"
    comments: false
    这时候你要为你的文章打上标签就可以在文章的头部写上:
    tags:
    - Tag1
    - Tag2
    - Tag3
    比如我现在的这篇文章打的标签就是这样的:
    tags:
    - 个人网站
    - 教程
    - hexo
    - blog
    - Git
    - Nginx

    给你的文章添加分类

    分类,归档,是你博客的特性之一。把文章分门别类,方便查看。
    打开hexo分类功能:
    hexo new page categories
    同样的,你的 source 目录下生成 categories/index.md 文件,我们将其打开,把它改成:
    type: "categories"
    comments: false
    这时候你就可以给你的文章归类存档了,使用方式就是在你的文章的头部加上:
    categories:
    - 分类1
    - 分类2
    比如我现在的这篇文章的分类就是这样的:
    categories:
    - 个人网站
    - 教程
    注意:标签和分类要确定你的配置文件 _config.yml 是否有打开了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的语法是写作最优雅最简洁最简单的,如果之前没用过的建议去学一下Markdown 语法说明,一般一个钟左右就能掌握。因为它和 HTML 那样简单。

    给你的文章添加评论

    当别人看了你的文章,有问题想跟你探讨,没评论怎么行?评论也是你的 Blog 交互的重要方式之一。
    现在很多 hexo 主题都内置了第三方评论的系统。比较常用的有:
    • 多说 :http://duoshuo.com/
    • 畅言 :https://changyan.kuaizhan.com/
    • Valine:https://github.com/xcss/Valine
    • Disqus:https://disqus.com/
    • 友言: http://www.uyan.cc/
    • gitment: https://github.com/imsun/gitment
    自己去看一下,喜欢哪个用哪个,自己的 Blog 就是要自由。
    选好你的评论系统之后,进入平台注册后,平台会给你一个 APPID 和 appkey。拿到这些信息到你的主题下的配置文件下设置。
    以 next 主题和畅言评论为例:进入你的themes/next,打开_config.yml,定位到 changyan ,把 enable 改为 true。
    changyan:
    enable: true
    appid: 这里写上你的畅言在appid
    appkey: 这里写上你的畅言在appkey
    设置好之后,重新clean生成一下就有评论啦:
    hexo clean
    hexo g
    hexo s
    打开你的预览连接看看你的文章下方,已经有评论功能啦。如下图就是我博客的评论功能:

    评论

    让全世界的人都认识你

    已经搞定了个人blog,接下来当然是要部署到网上让人家访问了,如果不想花钱,可以使用GitHub Pages,使用它就可以部署自己的网站啦。
    对于 GitHub 不知道怎么用的童鞋,可以看一下我的这个教程:GitHub完全使用指南:https://vip.fxxkpython.com/?cat=6

    创建 Github pages 仓库

    接着创建一个 xxx.github.io 的 public 仓库,这里的xxx写你的名字,比如我写的是 wistbean.github.io,那么到时我就可以通过 wistbean.github.io 来访问我的网站了。
    创建完成之后,那么你就有自己的 Git 地址了。

    安装 hexo-deployer-git

    在你的博客目录下输入如下命令,这样你在本地写的文章才能 push 到 GitHub 上面去。

    npm install hexo-deployer-git --save

    配置你的Git

    打开你的配置文件,然后输入你的 git 地址:
    deploy:
    type: git
    repo: https://github.com/xxx/xxxx.github.io.git

    推送你的网站到Github上

    直接输入命令 :hexo d
    d 就是 deploy , 部署上去的意思。

    访问你的网站

    这样push上去之后,你就可以直接在浏览器输入你的 xxx.github.io 就可以访问啦!

    要有点个性,绑上你的域名

    如果你不喜欢千篇一律的 xx.github.io 域名,可以自己绑定一个自己的域名。

    购买域名

    关于域名的购买我比较推荐去 dynadot 或者 godaddy,这是国外的域名商,可以使用支付宝购买,不需要备案,使用起来不错的。绑定
    买完你的域名之后,接下来几个步骤轻松搞定:

    添加 CNAME 文件

    在你的博客的 sources 目录下新建一个 CNAME 文件,这个文件里面就写你的域名就可以了,比如:www.xxxx.com。 接着将文件push到你的 GitHub上,可以使用 hexo d 命令。

    在你的域名商后台进行 DNS 解析添加两条记录:

    1. 主机记录:@
    记录类型:A
    记录值:192.30.252.154 或者 192.30.252.153

    2. 主机记录:www
    记录类型:CNAME
    记录值:xxx.github.io (这里就是你的github仓库名称)

    GitHub 设置域名

    在你的 GitHub 设置域名,在你的 GitHub 博客项目中点击 Settings,在 GitHub Pages 下的 Custom domain 写上你的域名,然后 save。
    GitHub 设置域名
    至此,你已经搭建好了自己的博客,托管你的网站到 GitHub 了,也绑定了你自己的域名了,那么这时候你的网站就可以被全世界的人看到了。
    ok,以上就是小帅b今天给你带来的分享,希望对你有帮助,那么我们下回见,peace!
    (0)

    相关推荐

    • 用 GitHub + Hexo 建立你的第一个博客

      在博客平台上注册,比如 博客园.CSDN.新浪博客 等. 利用博客框架搭建,如 WordPress.Jekyll.hexo 等. 自己用代码写一个. 其中,第一种最简单,也最受限,说不定还会被删帖删号 ...

    • 【保姆级】利用Github搭建自己的个人博客,看完就会

      大家好,我是辰哥~ 作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑.易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台. ...

    • 分分钟搞定一个拥有顶级域名的个人博客

      xxx.github.io虽然可以用,但是每次访问都需要输入这么长很麻烦,而且总感觉逼格不高啊.恰逢最近阿里云的.top域名在做活动,首年2块钱就可以注册一个,加之折腾github pages挺久了, ...

    • GitHub Pages搭建个人博客

      在这个平台里你可以使用自己的个性域名:可以在海量的主题里挑选最适合你的那一款,如果你技术极客,也可以根据自己的喜好,设计属于自己的个性化页面:你既可以在线创建和发布网站,也可以在本地通过客户端工具或者 ...

    • Hexo(5)-购买并绑定域名

      本系列其它文章: 用 GitHub + Hexo 建立你的第一个博客 [Hexo]部署博客及更新博文 Hexo(3)-安装自己喜欢的主题 各位同学博客汇总:来吧!互相链接吧! 哈哈,震撼人心的时刻终于 ...

    • 大邓的自建博客Thunderhit开通了

      Python数据挖掘与文本分析&Stata应用能力提升与实证前沿 开始报名了~ 在B站看到一位博主用Hugo制作个人博客的视频,感觉挺简单的,真的十几分钟就能看到云端出现自己的博客,当然了想让 ...

    • [Hexo]部署博客及更新博文

      本系列其它文章: 用 GitHub + Hexo 建立你的第一个博客 将本地文件部署到 GitHub 修改 Hexo 中的 _config.yml 文件 在 Hexo 文件夹下找到 _config.y ...

    • Github Pages + Hugo 搭建个人博客

      文章目录 Github Pages + Hugo 搭建个人博客 零.效果 一.创建 Github 库 二.安装 Hugo 和 Git 三.新建 Hugo 网站 四.选择 Hugo 主题 五.新建文章 ...

    • 今天,帅b教你使用 wordpress 从0到1搭建一个属于你自己的博客网站

      最近我开了一个 VIP 的网站,用的就是 wordpress 框架搭建的,我之前用过 octopress 和 hexo 搭建博客,它们相对 wordpress 更加轻量一些,更多的是面向程序员使用命令 ...

    • 富利证券:现金免费,0佣金,乙组额度保障,奖励800+ #DQ05

      富利证券:现金免费,0佣金,乙组额度保障,奖励800+ #DQ05

    • 【免费】0元洗鞋!鞋子坏了不要扔,南阳这家店,可以“旧鞋变新鞋”!

      对于鞋控来说 什么最重要? 除了不停花钱买新鞋之外 还有什么办法 可以让你获得 一种买了新鞋的感觉? 有没有什么解决方法? 当然有! emmmmm 这是我的鞋??? 觉得没救了 差点因为洗不净 要扔了 ...

    • 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

      之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享. ...

    • 联通BUG!免费开通0元5G上网服务教程

      摘要: 利用联通系统BUG订购0元5G上网服务,理论永久有效(有随时翻车可能)1.需要准备2部手机,或者一部手机一台电脑2.手机下载联通手机营业厅,登录需要订购5G服务的手机号,点服务--5G--5G ...

    • 利用Github免费制作app介绍主页

      这几天在准备spyfari的相关上线准备,有所收获,今天更新个技能-- [利用Github免费制作app介绍主页] 作为独立开发者,每一次的投入都是自己的精力或者金钱,为了节省开支,找到免费的托管网站 ...

    • 【e汽车】惊艳不高冷 3.0智能语音系统让博越变老婆

      点击上方 e汽车 关注我们 文 | 周萌 微信号 | eautocar "车与老婆,概不外借!",这是我们经常听到的一句话.虽然在某些女性看来这有些不可理喻,但却说出了男人对于车的 ...