Introductory Note
When trying to set up a remote theme for your website, often the theme will look nothing like the example and it’ll leave wondering whether you do something wrong or not. This is the revelation I went through, till I found out a way to make it all work.
Pick a Theme
- To preview what these themes could look, check here: page-themes
- Once you’ve made your decision, go to
_config.ymlin your website
#Uncomment the theme you'd like for your website
# remote_theme: pages-themes/minimal@v0.2.0
# remote_theme: pages-themes/leap-day@v0.2.0
# remote_theme: pages-themes/cayman@v0.2.0
# remote_theme: pages-themes/hacker@v0.2.0
# remote_theme: pages-themes/midnight@v0.2.0
# remote_theme: pages-themes/slate@v0.2.0
# remote_theme: pages-themes/primer@v0.2.0
# remote_theme: pages-themes/architect@v0.2.0
# remote_theme: pages-themes/modernist@v0.2.0
# remote_theme: pages-themes/time-machine@v0.2.0
# remote_theme: pages-themes/dinky@v0.2.0
# remote_theme: pages-themes/merlot@v0.2.0
# remote_theme: pages-themes/tactile@v0.2.0
Setting Up the Theme
Once you choose your theme, you’ll see the CSS for the website will change. However it won’t look like the preview just yet. For this example, I’ll be setting up the theme ‘cayman’ (the one I use). However, these steps are applicable for the rest of themes above.
- Go to https://github.com/pages-themes/yourtheme
- Once at the theme you’d like to setup, go to
_layouts/default.html - Copy the code and paste into your
_layouts/default.html
Now run your website. You’ll see that theme looks much, much better than before. However, you’ll also see your website doesn’t look quite right. This is because the code you copied and pasted needs to be edited to fit the needs of your website.
To have an idea on how to do this, check out my default.html file to get an idea on what to do.
Before & After
