This is a sad story. It has been a while since my last website (a WordPress run on VPS) “vanished”. I doubt it was due to misconfiguration of Debian’s crontab I used to auto refresh the ssl certificate or something like that. I think I will post something like the Nginx config of it later on my blog.
Ever since then have I had little time or energy to rebuild it, or more precisely, to maintain it. It is very tempting to use the WordPress again since it is so easy to make it run and so popular and so easy to find plugins. But the thing is, running on a VPS means it depends on some unstable services. When the VPS provider reboots the server, it is sometimes required to manually reboot Nginx service (or reload ssl keys refreshed by the bot of Let’s Encrypt. Their bot was still beta at that time). And it is also very hard to maintain due to the cost of the VPS itself and other problems too.
So I decided to make use of Github Pages. It looks like I need to start from the scratch again: to buy a new domain since the old one was ugly and hard to remember, to configure the DNS, to reconfigure Zoho emails (I had 10 different emails for my old domain to register on different websites), to choose the theme of the blog, to decide the structure of the whole website etc. (I tried to use Readthedocs for my wiki page, the page for all of my pure notes, and struggled to “fix” the package requirements for different versions of python of their codes
Long story short. Let’s dive into the main point of this post!
Note: the following notes was written as a comprehensive tutorial.
Go to Github and sign up
Github Page repository
At least one repository to store the generated website on Github is required. Just go to your Github home page and create a new repository following the instruction. You can either create it as a public or private repo. Other people cannot see the content of your private repo but since your Github page will be published you website will eventually be public.
There is a little trick here. If you name your repo as “YOUR_GITHUB_USER_NAME.github.io”, then your Github Page will automatically be published with that URL. Please read the documentation for more details.
In brief, install npm, hexo and create a Github repo.
That is almost all you need to host a website on Github for free! You don’t need to worry about SSL, don’t need to pay the fees for renting a server. So awesome thanks to Github!
Like I said before, previously I had different subdomains for different purposes. I had wiki, blog, me, doc, etc. And I used one simple page as the whole “site map” for all of them.
Same thing again for me.
Other choices may include:
- use one and only one website for the blog
- use hexo as a “show off” page to “show off” the frontend skills (something like a portfolio)
- use Github Pages as a website to host demo web applications
- and many many more!
Since I use hexo for most of my web sites, it’s crucial to have a pretty and fit theme. You can surely create your own theme too!
Place for you to seek for hexo themes.
Potential blog theme:
Potential wiki theme:
Potential moe theme:
Potential “show off” theme:
Please refer to the official hexo documentation for further details.
open terminal in your ideal directory
For windows, for example, winkey + r and rum cmd. cd \d “path to directory”.
type the following command to generate the initial hexo folder
customize _config.yml to meet personal need
For example, change the name of the site, change the theme and so on.
config _config.yml to use git to publish the website
add a post for our website to have something to show
Hexo will give provide us with a “hello world” post. Feel free to delete it.
Compare different domain name service providers. There is a cool website called domcomp Pay highly attention to the different prices of buying a new one and renewing an old one and transferring domain to another provider. Some general tips: Search for coupons first. For instance, one can use “PRIVACYPLEASE” to have free privacy on name.com. I don’t feel like posting my personal opinion about which one is better here, however.
Please read the official Github tutorial for further details
add customized subdomain to correspondent Github page settings
change CNAME record of DNS provider
don’t forget to add CNAME file to your hexo “source” folder or hexo will delete the CNAME config of Github Page. Or you could try to add the following line to the “deploy” of hexo config link to document: (note the grammar of yaml)
generate the website
or you can also use
make sure you set up the git deploy config properly
deploy your website generated by hexo
or you can also use
It looks like we have some website running. But where are the contents?
I have no idea if this is necessary or not for Github Pages. For VPS, in order to have better speed to load the pictures and to save storage, it is generally preferred to not save the pictures directly on your own server but on an image host.
You can try imgur and follow the instructions!
Edit and update old posts!