Setup Option 1
Go through the steps here.
Setup Option 2
- Fork this repo
- Setting up Jekyll on Windows: https://jekyllrb.com/docs/windows/ (if the Ruby development kit installation fails, then install it from here: http://jekyll-windows.juthilo.com/1-ruby-and-devkit/)
- Setting up GitHub pages with Jekyll: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/
- On Windows, make sure your Gemfile (in the root directory) looks like this:
source 'http://rubygems.org' gem 'github-pages' gem 'wdm', '>= 0.1.0' if RbConfig::CONFIG['target_os'] =~ /mswin/i
- Start cmd, navigate to the repo and launch the site:
bundle exec jekyll serve
- Make sure to register an account at Disqus to enable blog comments: https://disqus.com/
- Make sure to register a site at Disqus using your Disqus account: https://disqus.com/admin/create/
Setup SSL with Cloudflare, add NS and A records
Create an account or login at Cloudflare to setup SSL for your new site.
Cloudflare's name servers (NS) need to replace the default ones at the registrar site (GoDaddy):
GitHub's IP addresses need to be added as A records at the SSL provider site (Cloudflare):
A sirarsalih.com 188.8.131.52 A sirarsalih.com 184.108.40.206
Always use HTTPS (CloudFlare):
Unlike Hyde, it's opinionated about how you are going to use it (as a blog!) Features included are:
- Touch-enabled sidebar / drawer for mobile, including fallback when JS is disabled.
- Github Pages compatible tag support based on this post.
- Customizable link color and sidebar image, per-site, per-tag and per-post.
- Optional author section at the bottom of each post.
- Posts grouped by year on front and tag page.
- Social media icons (github, twitter) on sidebar.
- Optional comment section powered by Disqus.
- Math blocks via KaTeX.
Hydejack is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and feature requests.
I love the original Hyde theme, but unfortunately the layout isn't as great on small screens. Since the sidebar moves to the top, the user has to scroll just to read the title of a blog post.
Since the background image contributes to the feel of the page I'm letting it peek over the edge a bit. This also provides a hint to the user that an interaction is possible.
You can configure important aspects of the theme via
_config.yml. This includes:
- the blog description in the sidebar
- the (optional) author description and photo
- default image and link color of the blog
- the github and twitter usernames
How to Change the Image and Color of a Post
In the manifest of a blog post, simply add an url as
image and a CSS color as
layout: post title: Introducing Hydejack image: http://qwtel.com/hydejack/public/img/hyde.jpg color: '#949667'
How to Add a New Post
Simply add a new post to the
_posts folder with the following title format:
How to Add a New Tag
Tags are not meant to be used #instagram #style: #food #goodfood #happy #happylife #didimentionfood #yougetthepoint, as each tag requires some setup work. I tend to think of it as categories that can be combined.
Add an entry to
_data/tags.yml, where the key represents a slug and provide at least a
namevalue and optionally
mytag: name: My Tag
Make a new file in the
tagfolder, using the same name you've used as the key / slug and change the
layout: blog_by_tag tag: mytag permalink: /tag/mytag/
Tag your blog posts using the
tagskey (color and image will only depend on the first tag).
layout: post title: Introducing My New Tag tags: [mytag, othertag]
(optional) Add the tag to the sidebar, by adding it to
_config.yml. They will appear in the listed order.
sidebar_tags: [mytag, othertag]