[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/darkreader@4.9.40/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