使用github做个人博客

盛碗米饭 盛碗米饭     2022-09-20     190

关键词:

前言

用过市面上主流的blog程序,也用Django自己写过开源的博客程序July(170+Star),慢慢的发现没太多精力去打理维护,干脆直接放GitHub当静态页面算了,之前也用过Hexojekyll等静态程序,但使用起来还是繁琐,体验不到写作的乐趣。

所以,干脆直接放GitHub把,简单粗暴,你可能只需要做一件事情,就是准备好一个GitHub账号,再准备一个域名,不论备案与否。

创建GitHub仓库

假设你已经有GitHub账号,如果还没有点我注册,登录你的账号,创建一个仓库

技术分享

仓库名、描述等信息,填写一个你喜欢的就好。

# 下载创建好的仓库
$ git clone https://github.com/anshengme/blog.git
$ cd blog/
$ echo ‘Hello, Ansheng!‘ > README.md
# 绑定的域名
$ echo ‘blog.ansheng.me‘ > CNAME
$ git add .
$ git commit -a -m "2017-05-26 23:19:08"
# 提交到仓库中
$ git push

这时候访问你的用户名+github.io/blog应该就能出现Hello, Ansheng!字样,但这并不是我们想要的,我想直接访问blog.ansheng.me就出现想要的结果,应该怎么做呢?

域名绑定

上步骤在仓库中的CNAME写入了blog.ansheng.me,其实我们只需要在自己的域名管理后台添加一条cname记录指向到anshengme.github.io就可以了,如下图所示:

技术分享

我添加了两条记录,@blog,因为我启动了ansheng.meblog.ansheng.me

HTTPS跳转

这里我使用的是Cloudflare提供的免费CDN服务,并且开启HTTPS以及HTTP2,只是为了一个小绿锁,目测现在大部分的站点都已经开启了,不用总感觉哪里不对劲(档次低)。

假设你已经注册了Cloudflare账号,也已经绑定了你的域名,注意,这里绑定域名的时候需要把Nameserver指向Cloudflare所提供的,不然不能提供CDN服务,比如我的域名在阿里云买的,但是把NS改成Cloudflare的了

技术分享

如果你已经将NS指向到了Cloudflare中,请确保你的域名状态如下所示

技术分享

域名状态一定要是Active才可以哦。

开启SSL

Cloudflare的站点管理页面,切换到Crypto这个标签页。将SSL的模式改为full

技术分享

开启之后稍等片刻你就可以通过https进行访问了,但是你会发现当访问http的时候并不会自动跳转到https,所以,你可能还需要下面的操作。

强制跳转到HTTPS

切换到Page Rules页,添加一条页面规则

技术分享

http://*ansheng.me/*

填写完毕之后点击Save and Deploy就可以了,可能需要一段时间,毕竟有缓存。

遇到的坑

想过使用阿里云的CDN做强制HTTPS跳转,但巨麻烦,因为阿里云在跳转的时候不能与原域名重复,所以,每个https域名都必须做两条记录,而且配置的CDN不知道什么时候神效,我前天晚上登录两三个小时都没生效,所以直接换Cloudflare了,免费的把,只要是这。

$ curl -I https://blog.ansheng.me
HTTP/2 200 
date: Fri, 26 May 2017 15:52:54 GMT
content-type: text/html; charset=utf-8
set-cookie: __cfduid=d76f0ba8019b6ca9aecc7420de5e6ac5c1495813974; expires=Sat, 26-May-18 15:52:54 GMT; path=/; domain=.ansheng.me; HttpOnly
last-modified: Fri, 26 May 2017 05:58:36 GMT
access-control-allow-origin: *
expires: Fri, 26 May 2017 12:10:36 GMT
cache-control: max-age=600
x-github-request-id: 9196:1FDB:577B6E:7848FF:592818E4
via: 1.1 varnish
age: 5
x-served-by: cache-sjc3646-SJC
x-cache: HIT
x-cache-hits: 1
x-timer: S1495813974.473891,VS0,VE1
vary: Accept-Encoding
x-fastly-request-id: 2dc90b55edced17846d414909da9b20e89fdcccc
server: cloudflare-nginx
cf-ray: 3651e77c68d96bfe-SJC

上面是CDN服务器返回的数据,真的是支持HTTP2了,虽然访问还是慢之类的,但是不用操心续费了。

还有一个就是如果你写的.md文件格式有错误是可以在下面的页面看到的

技术分享

技术分享

如果你每次上传的.md文件格式没什么错误的话会提示你 Your site is published at http://blog.ansheng.me/,如果格式错了,会直接提示你那个文件第几行出现语法错误,还是很智能的。

总结

作为一名程序员,使用Markdown写作是标配了,用了之后你会发现真的是太棒了。

使用github+jekyll搭建个人博客

...建一个个人技术博客非常简单,其中最简单搭建方式莫属使用GitHubPages+Jekyll了,关键是免费,重要的事情说三遍,免费、免费、免费。GitHub介绍gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格... 查看详情

使用node.js+hexo+github搭建个人博客(续)

一、写在前面在我的上一篇博客《使用Nodejs+Hexo+Github搭建个人博客》中,已经介绍了如何使用Hexo在GithubPages上搭建一个简单的个人博客。该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍:博客相关配置介绍... 查看详情

bootstrap实战之响应式个人博客(代码片段)

...2、博客详情页3、在线地址在线地址:入口Addition:这里使用github-page将自己的静态项目免费部署到线上。如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github... 查看详情

使用githubpages建立个人博客

一、创建githubpages个人主页1.在github上创建username.github.io项目,其中用户名即为github用户名 2.增加项目首页clone项目到本地文件夹~$gitclonehttps://github.com/username/username.github.io切换到项目目录下~$cd username.github.io增加项目首页... 查看详情

使用hexo和github搭建个人博客网站(代码片段)

使用hexo+github可以免费、快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客。使用github部署静态页面在了解hexo之前,我们先看看如何使用github部署静态页面。注册github账号访问github... 查看详情

使用hexo+github搭建个人博客(代码片段)

使用Hexo+GitHub搭建一个属于自己的博客.准备注册GitHub账号,并建立新仓库你需要在Github上创建一个属于自己的账户,然后新建一个仓库(newrepository),并命名为YourSiteName.github.io,此时Github会帮助你初始化一... 查看详情

使用github和hexo搭建个人博客(代码片段)

...设置头像设置社交设置Logo参考资料最终效果首先展示下使用GitHub和Hexo搭建的个人博客效果Erik-lyhttp://www. 查看详情

使用hexo+github搭建免费个人博客详细教程(代码片段)

...配置SSHkey、安装node.jsnpm、安装Hexo及配置、发布博客前言使用githubpages服务搭建博客的好处有:全是静态文件,访问速度快;免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;可以随意绑定自... 查看详情

使用hexo搭建github个人博客网站

搭建步骤:1>Mac或win电脑一台,本文以mac为例。2>下载安装Git和Node3>安装hexo4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户名.github.io5>购买域名,本文以阿里云为例,解析域名。6>博客主题,标题,界面设置... 查看详情

使用hexo+github搭建个人博客的心得(含教程)(代码片段)

...客,就需要找个靠谱的平台,主要就是以下的两种方式:使用网站提供的博客平台,例如国内的CSDN、博客园;国外的Blogger、Wordpress自己建站,发布到自己的服务器上,或者发布到G 查看详情

hexo+github/coding免费搭建个人博客网站

...nbsp;体验更优排版请移步原文:http://vblog.win/blogs/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把平时遇到的问题和解决问题的方式方法记录下来,顺便提升自己的表达能力... 查看详情

hexo+github搭建个人博客

写在前边:Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。1.安装git【因为我们写好的博客受与github相关联,在本地可以运行后,还要通过git... 查看详情

第4次个人博客——github和git的使用

1、注册/登录这里因为我很久以前注册过了就略过这一步,就直接登录了  接下来就可以创建我们的github库了,点击下图的startaproject  就进入到如下的界面,填写一些你的库名称,再写一些描述,接着选择对公开放... 查看详情

mac下使用github+hexo搭建个人博客(代码片段)

...链接开始之前需要在电脑上安装好Git和node.js,Mac上可以使用Homebrew命令行工具来安装Git和node.js安装Homebrew在命令行工具输入以下命令,如果已经安装过Homebrew可以忽略/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/mast... 查看详情

2018-1-6-个人博客博客园微信公众号github本地同步写博客

...程是利用Markdown神器--小书匠进行串联地,墙裂推荐大家使用1.写博客2.发布到博客园3.发布到自己的博客4.同步到Github5.博客发布到自己的微信公众号中1.写博客下载小书匠,关于Markdown的语法此处不再介绍。点击新建,创建自己的... 查看详情

搭建个人博客github+hexo(代码片段)

...绍了,快速开始准备安装软件依次安装1、Node.js2、Git注册github访 查看详情

个人作业-技术博客(α)

个人作业-技术博客(α)使用Gitkraken协助Git团队合作博客1:超详细!Github团队协作教程(Gitkraken版)包括内容:前期工作 1.在Github上创建organization 2.邀请队友加入organization并创建team 3.建立团队项目仓库,在设置中将team的权... 查看详情

githubpages+hexo搭建个人博客网站-github风格-采坑记录(代码片段)

...github上创建仓库3.安装hexo4.hexo主题5.配置主题6.添加文章7.使用分类和标签8.增加文章目录9.推送github使用githubpages+hexo搭建个人博客,网上很多教程,这里并不具体记录,只是记录下自己搭建过程中遇到的一些问题。1.本机安装nodej... 查看详情