[Comments] Building a Free Blog with GitHub Pages in Minutes

[chadbaldwin]

https://chadbaldwin.net/2021/03/14/how-to-build-a-sql-blog.html

[SarahLii]

Thanks a lot! It`s really helpful!!!

[jessieupp]

thank you! is it easy to add comments to a blog post like this? :)

[chadbaldwin]

@jessieupp Hi! Sorry I didn't get back to you sooner. So I looked into this a bit for you, and the answer is yes! In my opinion, the best way to do it is to use GitHub issues for comments. Each blog post has an "Issue" assigned to it, and the comments show up on your post. Which is exactly how our comments to each other are working right now.

I'm not sure what type of blog you plan on writing, but since my blog is geared towards software/database developers, I'm okay with requiring my readers to have a GitHub account in order to leave a comment. If your blog is about something less technical, then you may want to find another option than this one.

I believe there are other options such as disqus, which may be more appropriate for a more universal blog, however, it's not free and would still require someone to register in order to leave a comment. If you decide to go that route and you're having trouble getting it to work with your site, feel free to reach out to me.

---

The comment system I was using on this site prior to your comment was just a simple script I found that someone else had written, it looked decent and it worked...but it required doing things like modifying your blogs configuration, manually creating a GitHub issue, linking it to your post, etc.

While looking into this, I came across a popular GitHub app called utterances. It's almost identical to the comments section I was using before, but with WAY more features, and its all automatic. I no longer have to manually create GitHub issues, and best of all, it was relatively easy to set up. So I decided to make the switch, thanks to you! haha

I would recommend checking it out here:
https://github.com/apps/utterances

The set up process is pretty straight forward...I clicked configure, picked which repo I wanted it to apply to, in this case it was my chadbaldwin.github.io repo. And then let it set up. At this point, it's simply enabled access to the app, it has not been added it to your site yet.

Afterwards it directed me to a page that helps generate the setup script you need (this is the page in case you don't get redirected https://utteranc.es/)

You fill out their form, and at the bottom, you can copy the script that looks something like this:

  <script src="https://utteranc.es/client.js"
          repo="chadbaldwin/chadbaldwin.github.io"
          issue-term="og:title"
          theme="github-light"
          crossorigin="anonymous"
          async>
  </script>

Except in your case, you would use jessieupp/jessieupp.github.io

Then you take that configuration and plop it at the bottom of your post.html layout file here:
jessieupp.github.io/_layouts/post.html

Now as soon as someone leaves a comment, it will automatically create a github issue on your behalf, and add that persons comment, and it will now show up on your post. Et voilà!

I may actually modify the blog bootstrap used in this post to add that configuration, but disabled so future readers can simply turn it on with a switch in the _config.yml file.

Hope this helps and happy blogging!

[XenocodeRCE]

@chadbaldwin do you mind telling us how to add other language for syntax highlighting ?

I tried to do so, for c# :

navigate to js/highlightjs/languages/
create csharp.min.js
fill in with :

hljs.registerLanguage("csharp",(()=>{"use strict";return t=>({
name:"csharp",aliases:["csharp", "cs"],disableAutodetect:!0})})());

but it doesnt seems to work, im sure im missing something :)

[jessieupp]

Thank you very much for sharing, Chad!! I look forward to testing it out.

On Sun, Aug 15, 2021 at 9:05 AM Sam Harwood ***@***.***> wrote: @chadbaldwin <https://github.com/chadbaldwin> do you mind telling us how to add other language for syntax highlighting ? I tried to do so, for c# : navigate to js/highlightjs/languages/ create *csharp.min.js* fill in with : hljs.registerLanguage("csharp",(()=>{"use strict";return t=>({ name:"csharp",aliases:["csharp", "cs"],disableAutodetect:!0})})()); but it doesnt seems to work, im sure im missing something :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUHSXOLAPITTODIRBHX57NLT47QTJANCNFSM4ZG6HGUQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

-- Jessie Upp Cell: 206.841.9917​

[AndrewVong]

Thanks so much! Do you know how I can add this blog as a page to an existing site I've already made?

[XenocodeRCE]

So I come back to answer my own question :

Github pages has built-in syntax highlighting, if one no need tsql specific stuff, one can edit /_includes/head.html file and remove any ref to highlights.js, like so :

  
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {%- seo -%}
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
</head>

Take care of you everyone

[chadbaldwin]

@XenocodeRCE yup! I was drafting up a response as I saw your comment pop up.

Just an FYI, you still need to fix your _config.yml file as well and remove this:

kramdown:
  syntax_highlighter_opts:
    disable: true

Your other options are to convert it to use the CDN hosted version of highlight.js, or add the csharp language file if for some reason you want to keep using highlight.js.

[chadbaldwin]

Thanks so much! Do you know how I can add this blog as a page to an existing site I've already made?

@AndrewVong , I'm not sure. I'm not too familiar with that sort of stuff. I think your best option would be to set up this site as a subdomain for your main site? At least then it maintains the same domain. But I'm not sure how to set that up.

[TJPBray]

Is there a simple way to (1) change the background colour template and (2) add a personal photo? I've tried changing 'minima' to other (apparently supported) options, but they don't seem to be recognised.

[MariannBea]

This is great! Thank you. I though it was going to take me hours to set up a blog, but this helped me get my first blog post up in less than an hour.

[tororutsu]

is there a way to customize the css of each individual blogpost?

[JohnOCFII]

Very nice! I followed your instructions last night to set up a blog, and this morning, checking your site again, I see you are automatically switching from dark mode to light mode. Curious if you can point to where that is done.

Also - is there a preferred way to link and display images?

Thanks for the clean, easy to follow instructions!

[chadbaldwin]

@JohnOCFII good news for you, it's very easy to set up. There's a Chrome extension I use called "Dark Reader", this extension will automatically convert all pages to a dark theme. It's pretty smart and works well 99% of the time. You can even customize how it makes it dark by changing settings like brightness, contrast, etc.

Well, the creator of the extension also made it so that you can run it on an entire website by including it as a script.

It allows you to support automatic switching based on system settings. Or you can force dark theme. You can also customize the same settings offered in the extension.

To set it up, this is all you need to do:

Open up /_includes/head.html

And add this snippet:

<!-- dark theme using DarkReader -->
<script src="//unpkg.com/[email protected]/darkreader.js"></script>
<script type="text/javascript">
  DarkReader.setFetchMethod(window.fetch); // Fix to remedy CORS errors in chrome console
  //DarkReader.enable();
  DarkReader.auto( {brightness: 100, contrast: 90, sepia: 10} );
</script>

This snippet is set up to enable dark theme based on system settings.

You can see it in use on my site here:
https://github.com/chadbaldwin/chadbaldwin.github.io/blob/main/_includes/head.html#L39-L45

---

As far as displaying images, I'll direct you over to this issue where someone asked me something similar:

chadbaldwin/simple-blog-bootstrap#2

[chadbaldwin]

@rjahrj You should be able to add a <style> section to the top of your blog post for custom styling on a per blog post level.

I've done this in the past, see the code for this post:
https://github.com/chadbaldwin/chadbaldwin.github.io/blob/main/_posts/2021-01-15-raiserror-cheatsheet.md?plain=1

[JohnOCFII]

Images and Light and Dark are now working. Thanks again!

It looks like you've got some basic tagging setup in your blog (T-SQL, SSMS, etc.) when seen from the archive page. Can you point me in the direction to set up something similar?

[chadbaldwin]

@JohnOCFII More good news...that's a built in feature for the software that builds the blog used by GitHub. The software is called Jekyll.

The feature is called "front matter", and it's a way of giving Jekyll a bit of extra information about your blog post.

You can find more info about it here:
https://jekyllrb.com/docs/front-matter/

Here's an example from one of my recent blog posts:

---
layout: post
title: "Working with secure FTP in PowerShell"
description: "Recently learned a new way to work with secure FTP in PowerShell"
date: 2021-11-01T07:00:00-07:00
tags: PowerShell
---

So basically you just use a set of 3 dashes --- and then put the info in there. So in this case, I'm setting these settings, which are all optional:

• layout - setting it to "post" which is the default value for anything in the _posts folder anyway, I just like being explicit
• title - this is optional as the title will automatically get set based on the first line in your blog post that starts with #, but again, I like being explicit
• description - this is useful for when you share your post via twitter, linkedin etc, it can use your description. It's also populated in your RSS feed for anyone who has subscribed to your site that way.
• date - again, optional, by default it uses the file date, but you can optionally override it here.
• tags - you can specify one or more tags here like tags: PowerShell T-SQL. That would count as two tags.

If all you want is to tag your post then you can simply do this:

---
tags: PowerShell
---

And the "Blog Archive" page will automatically break them up by Tag. So just stick that bit at the very top of the post, and it should just work 👍

[JohnOCFII]

That was so incredibly easy! Thanks so much, @chadbaldwin!

[AngelinesYG]

Hi. I need a little help.
Everything worked great, so thanks for that!
But I tried changing the theme, and also the "comment with rss" thing didn't work, so I went to _config.yml and commented it out, then changed my theme. But after doing this, the links for the blogs disappeared. The only thing that shows on the site is the "about me" part. I went back to _config.yml and uncommented the rss, but that didn't fix it. I have no idea what could have happened because I didn't touch anything else

[ghost]

Hello Mr Baldwin, I was wondering how I could change the titles font. Currently my title is "Bleeding Trees", and I personally think it looks slightly out of place. Everything else works wonderfully though, and I am eternally grateful for this easy to use template.

[andreamoro-git]

Thanks so much! Do you know how I can add this blog as a page to an existing site I've already made?
@AndrewVong I assume your site is a github site. You can clone this project and then at step 3 name your repository "blog" instead, or whatever you want your page to be named. Then, once your repository is set up, go to settings/pages and under source select main/root and save. Your blog will be available at [yoursite/blog].

Not everything will work, you'll have to modify some of the templates and configuration to make sure the baseurl is [yoursite/blog]. Under _config.yml add the variable baseurl: "/blog". You may have to modify other templates if some links don't work, by adding {{ site.baseurl }} to some links.

here is my solution https://github.com/andreamoro-git/blog

[jakefrk]

Thanks for this. Got it set up but test posts aren't displaying. Was there another step?
https://jakefrk.github.io/

[andreamoro-git]

@jakefrk it's strange because your archive is showing the posts https://jakefrk.github.io/archive,

are you using the minima theme? Somehow the home layout is not loading, try to copy this file to _layouts/home.html https://github.com/jekyll/minima/blob/master/_layouts/home.html

[sgbaird]

Any suggestions for implementing tooltips with this template?

[skmuiruri]

Nice template, thanks for sharing.
Is there a way of getting rid of the rss links?

[andreamoro-git]

Nice template, thanks for sharing. Is there a way of getting rid of the rss links?

edit the head.html template and remove the relevant row

[chadbaldwin]

@skmuiruri, you can disable it by commenting out the line rss: rss in the _config.yml file. Change the line to #rss: rss, this will remove the link, however, RSS functionality will still be there, it just won't show the link.

As far as I know, there's no simple way to completely disable RSS functionality. It is loaded via a default plugin that GitHub Pages includes. There may be a way to disable it entirely maybe through un-loading the plugin somehow, which I've never done before, or maybe through a setting in the plugin itself:

https://github.com/jekyll/jekyll-feed

[chadbaldwin]

@andreamoro-git RSS settings are not part of the head.html include file. The RSS functionality is a default plugin included by GitHub Pages, and is enabled by default. The link is built into the Minima theme and the only way to remove it is by following my instructions above....or by creating a social.html override file that doesn't include it.

[chadbaldwin]

@sgbaird I don't know of any simple way to add tooltips. You'll probably have to go with a generic HTML/CSS solution online. You can mix HTML and Markdown in the same file, so you can probably find some sample tooltip code online, add the CSS to the css/override.css file, and then add your tooltip <span> tags directly in the post.

[Pepelu-ing]

There is a saying: Less is more!
Thank you so much for giving such greatful guide!

[ghost]

As J-Furber mentioned above...

This is amazing!!!

I would also like to remove the "subscribe via RSS" ...

I imagine that's accomplished by #commenting-out some line some where, but...

I don't see anything in index.md or the includes files...

How might this be done?

Thank you for all your efforts here.

https://carmine-vile.github.io/blog/

(for the moment until I set a custom domain...)

[chadbaldwin]

@J-Furber , @carmine-vile Hey! Sorry, I often don't have time to respond to most comments anymore (unfortunately). I really wish I could keep up and blog more often.

Unfortunately, it's not an easy answer. There's a couple things going on here...

To disable the RSS link in the footer that is on every page, you can simply comment out this line in your _config.yml file:
https://github.com/chadbaldwin/simple-blog-bootstrap/blob/main/_config.yml#L23

However, to remove the "subscribe via RSS" that is on the home page, it's a little more work. When you create a blog using this post, it's using what's called a "Jekyll Theme". So basically, most of the code controlling the blog is stored and maintained by the Jekyll team. The theme this blog template is using is called "Minima".

However, you can override any files you want in the theme. So if there is something in the theme you don't like, like this "subscribe to RSS" thing, you can just override the file that is in the theme, and Github will use your file instead of theirs.

So to get rid of the "subscribe via RSS" link on the home page, you need to copy this file:
https://github.com/jekyll/minima/blob/2.5-stable/_layouts/home.html

To the "_layouts" folder on your blog. Would probably be easiest to just copy paste the text into a file with the same name "home.html" in the same folder "_layouts".

Then within that file, you can remove the line that displays the "subscribe to RSS" link, which is here:
https://github.com/jekyll/minima/blob/2.5-stable/_layouts/home.html#L31

I'll add this to the list of things I hope to eventually add to the template so others won't have to go through all these steps in the future.

[ghost]

Greetings from Monterrey, Mexico. Thank you so much for steering me in the right direction. Your efforts are greatly appreciated. Best wishes. Carmine Enviado desde Proton Mail móvil

…

-------- Mensaje original -------- El 21 ene 2024, 1:29 p. m., Chad Baldwin escribió:

***@***.***(https://github.com/J-Furber) , ***@***.***(https://github.com/carmine-vile) Hey! Sorry, I often don't have time to respond to most comments anymore (unfortunately). I really wish I could keep up and blog more often. Unfortunately, it's not an easy answer. There's a couple things going on here... To disable the RSS link in the footer that is on every page, you can simply comment out this line in your _config.yml file: https://github.com/chadbaldwin/simple-blog-bootstrap/blob/main/_config.yml#L23C1-L23C9 However, to remove the "subscribe via RSS" that is on the home page, it's a little more work. When you create a blog using this post, it's using what's called a "Jekyll Theme". So basically, most of the code controlling the blog is stored and maintained by the Jekyll team. The theme this blog template is using is called "Minima". However, you can override any files you want in the theme. So if there is something in the theme you don't like, like this "subscribe to RSS" thing, you can just override the file that is in the theme, and Github will use your file instead of theirs. So to get rid of the "subscribe via RSS" link on the home page, you need to copy this file: https://github.com/jekyll/minima/blob/2.5-stable/_layouts/home.html To the "_layouts" folder on your blog. Would probably be easiest to just copy paste the text into a file with the same name "home.html" in the same folder "_layouts". Then within that file, you can remove the line that displays the "subscribe to RSS" link, which is here: https://github.com/jekyll/minima/blob/2.5-stable/_layouts/home.html#L31 I'll add this to the list of things I hope to eventually add to the template so others won't have to go through all these steps in the future. — Reply to this email directly, [view it on GitHub](#11 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/A5AC7NTUXRMZM3WOGENICZLYPVUDDAVCNFSM4ZG6HGU2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGI3TGNRTHE2Q). You are receiving this because you were mentioned.Message ID: ***@***.***>

[luangdiri]

Very easy to setup, very simple intuitive style. Just what I wanted for my new blog. Thanks for making this @chadbaldwin!. Anyway, if anyone wanted to implement pagination into their blog, you can refer to my repo.

https://github.com/luangdiri/luangdiri.github.io

Will do a write up on it because the docs isn't as helpful and Github is still using an outdated Jekyll paginator library.

[yanpiaowanli]

I noticed that the blog won't be displayed on the website when using Chinese character in my posts(I mean the Markdown file). How could I solve this problem? Thanks for the effort though

[stockpickslk]

Thank you Chad. This is awesome, I setup up my blog in minutes. I wish you an amazing life!

[Harsiithaa]

Hi this is super useful!!. Im new to this stuff. I want to change the background colour, font styles etc but i dont know in which i have to change. I tried all three .css files like override css, github.css, default.css but no changes. Please help

[liliaoyuan]

Hi this is awesome, thanks
But I have a question that I think jelly renders markdown to html is sliently different.
Since all the math formulas is not supported by created blogs while it does be compiled to math type.
And I have searched for a little as suchLayouts
.html. However, I still can not make a compatiable to your layout repo. any suggestions?

[chadbaldwin]

@liliaoyuan I'm assuming you're asking about Latex support, if not, then ignore this comment and let me know what you mean.

This isn't really a Jekyll/Markdown issue as Latex rendering is not part of Markdown, but some Markdown renderers also happen to support Latex.

What I would recommend is adding MathJax support to your site. It's honestly pretty easy...Just add this to the bottom of your head.html file:

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

Your head.html file is located at \_includes\head.html

I just got that from the official MathJax documentation here:
https://docs.mathjax.org/en/latest/web/start.html

Then you can add math code blocks to your posts, like this:

$$
\cos\left(A\right)=\frac{b^2+c^2-a^2}{2\cdot b\cdot c}
$$

Or \(\cos\left(A\right)=\frac{b^2+c^2-a^2}{2\cdot b\cdot c}\) for inline.

More info in their docs here:
https://docs.mathjax.org/en/latest/basic/mathematics.html

[chadbaldwin]

@Harsiithaa So a couple things going on there...github.css, default.css and ssms.css are all CSS files related to highlightjs which is the library included with the blog for supporting things like syntax highlighting when you add code blocks to your blog posts.

Editing those files may or may not have the correct scope for customizing the blog in the way you want.

The other issue is there appears to have been a bug in the template I created for this blog post. The head.html file was missing a reference to the override.css file. I have since added that reference to the template, but you still still need to add it to yours to fix it.

You can see the change you need to make here:
https://github.com/chadbaldwin/simple-blog-bootstrap/blob/main/_includes/head.html#L13

HOWEVER, this will only allow you to override certain things, but not all. I'm nowhere near a web designer or CSS expert. But from what I can tell, Jekyll doesn't seem to have a very easy way to customize the themes using simple override files.

I'll try to spend a little time looking into this to see if there is an easy option, but for now I don't see it.

[liliaoyuan]

Hi Chad, Thanks for your detailed answers. It does work!
You may see that I am rookie on web engineering, Can I have a conceptional question?
Is a renderer similar to a compiler for computer languages? Are web languages like HTML, CSS, and JavaScript rendered into a webpage in the same way that languages like C or Java are compiled into an executable? Additionally, are special elements, like mathematical notation, implemented as libraries that just need to be imported?

[heeraimmandi]

Hi Chad! I really appreciate this post, it helped me set up my blog really quickly. I am not experienced in coding, but I was wondering how you changed the color of your website (the text and the background)

[heeraimmandi]

Also, how can you add images to a post?

[ScottN13]

Hey Chad! Thanks for the template and tutorial! I'm currently scrolling through the comments and managed to replicate the Dark Theme and utteranc.es

~~I have a question, how can I turn recent posts into embeds?
You see, I have a "Latest news and updates" on my website. I really don't know much about Jekyll, and I'm trying to learn web development.

Is there any solution or script that could help me? Thanks!~~

Edit: solved all of my problems :)

[heeraimmandi]

Hi Chad! How do you add a favicon to a blog made with this template?

[ScottN13]

@heeraimmandi

Hi Chad! How do you add a favicon to a blog made with this template?

Add the favicon how you would add a normal one in _includes/head.html
For example, mine is auto-updating to my github pfp.
<link rel="icon" href="https://avatars.githubusercontent.com/u/87974560?v=4">

[chadbaldwin]

Also, how can you add images to a post?

Sorry I haven't been able to reply very quickly. Looks like you got it all figured out, blog looks great!

[heeraimmandi]

It's all good. Thank you!

[enews]

Hiya!! Is it possible to further customise my homepage with HTML/CSS on this template? I can't seem to figure out how. Thanks!

[SNaveenMathew]

This is great - I'm not an expert, but it's relatively easy to tweak for my blog that has a lot of math.

Is it possible to add a preview image? - like Medium articles I'd like to add an image that shows up when the link is shared on social media platforms like LinkedIn.

[renanfranca]

Is it possible to add a preview image? - like Medium articles I'd like to add an image that shows up when the link is shared on social media platforms like LinkedIn.

@SNaveenMathew : Yes, it is possible. Look my articles and how i did: https://github.com/renanfranca/renanfranca.github.io/tree/main/_posts

[SNaveenMathew]

@renanfranca thank you for sharing. I tried adding 'title' and 'image' between "---" (three hyphens, I remember using them in Markdown before to specify output type, etc; I assume these are headers?), but couldn't get it to work as the build was failing. I tried searching your repo for specific code to process the title, image, tag, etc. but couldn't find anything. Did you include additional scripts/packages to parse the section between "---"?

[renanfranca]

@SNaveenMathew : it has been a long time ago since i setup my blog, I don't remember if there is some details.

You can start adding only title and see if it works without building failure.

[SNaveenMathew]

@renanfranca tried that earlier, didn't work. Since I'm unable to identify the package/code block in your repo, I'll probably adopt some bits and pieces from your repo and see if it works for me. Thank you!

[renanfranca]

I'll probably adopt some bits and pieces from your repo and see if it works for me. Thank you!

Anytime! I wish it works for you. In the last case, fork my repo :)

[SNaveenMathew]

@renanfranca thank you, very helpful! I could not get to the bottom of the issue. I forked your repo and started updating stuff. The only issue I found was with using ":" in the content between the "---".

For example

title: something: nothing

This fails because of the ":" in the title text. I'm not sure if this can be fixed by wrapping double quotes around the title; I just replaced the : instead.

[renanfranca]

title: something: nothing\nThis fails because of the ":" in the title text. I'm not sure if this can be fixed by wrapping double quotes around the title; I just replaced the : instead.

@SNaveenMathew : every time something similar happens i took the easy way out. In that case it is to change de title name :)

edit: look at my other titles and see if i used something similar 👍

[ibrarzahoorr]

Looking for a reliable partner in mobile app development? Asapp Studio is recognized as one of the best mobile app development companies in Canada. We specialize in delivering innovative, user-centric solutions for iOS, Android, and cross-platform applications. Let us turn your vision into reality with scalable and high-performing mobile apps tailored to your business needs.