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

[chadbaldwin]

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

[slendermon]

@heyakshayjain try adding these files and see if it works https://github.com/chadbaldwin/chadbaldwin.github.io/blob/d07d598b553fb35c9fb83eeab01cfb53529fadff/_includes/resume.html

https://github.com/chadbaldwin/chadbaldwin.github.io/blob/45a9144c3af50b4ed8f3d97fd45f1ba6b3f30519/css/resume.scss

I see you have already added the resume.html but it needs to be with the css and _includes.

Also, revert the config.yaml because you don't have to do anything to it

sorry i also left two comments on your config.yaml commits

[klasycznyziemniak]

Hey! Is there a way to add pictures to the blog post ?

[deadex-ng]

@chadbaldwin - Could you help with adding images to the blog post. I'm able to images the the markdown file and I can see it when I preview. But once I commit the post and I check the blog post, the image is not displayed.

[steranka]

I noticed my page isn't as wide as I would like it. I found the CSS (using Chrome DevTools) and it says:

.wrapper {
    max-width: calc(800px - (30px * 2))
}

So I manually changed it to 1200px and got my desired effect. Do you have a pointer to what I would change to make this a permanent change? I'll start looking at https://jekyllrb.com/docs/

[I-Am-Crumbles]

Could someone point me in the direction where I can figure out how to edit my page to always display in dark mode?

[chadbaldwin]

@heyakshayjain , @klasycznyziemniak , @deadex-ng , @steranka

Hey all! I'm sorry I haven't been able to answer your questions. This is a very popular blog post and it's often difficult for me to keep up with the comments along side my personal projects and my day job.

Some of you may have already figured out the answer to your questions already, but I'll try and work on getting some answers to you anyway for future readers who might run into the same problem.

I will also take your questions into consideration when I eventually have time to improve this blog post so that those items are baked into the tempate for future readers.

I appreciate you reading my post and finding it useful and sorry for the delays.

Thanks!

[renanfranca]

I come here to say thank you very much! I started blogging in February/2022 because you made my life easier to start!!!

Here is my blog: https://renanfranca.github.io/

A cool feature that I implemented in my blog was built-in anchors heading without using javascript, so no slow down! I implemented draft feature too.

Below I explain how to do it and post the reference:

Anchor headings

(Resume) Awesome repository that add anchor heading to Jekyll pages without the need of javascript!

To make it works replace the {{content}} at layout page.html or post.html for the following code which use fontawesone to represent the anchor:

{% include anchor_headings.html html=content anchorBody="<i class='fa fa-link'></i>" %}

• Add the fontawesone to the header:

  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

---

References

1. https://github.com/allejo/jekyll-anchor-headings

[chadbaldwin]

@renanfranca very nice!! I knew markdown headers automatically could be used as tags, but I never thought about adding that little tag icon as well. I like that cause it encourages people to share links your blog.

Now that so many people have used this tutorial to get started. I've considered writing a follow-up post on other features I've implemented in my own blog. Such as scheduled posts, updating my GitHub home page automatically, code copy buttons, comments using GitHub, automatic dark theme, rendering mathjax, how to get proper banner pictures for your blog posts when sharing to twitter/linkedin, etc.

[renanfranca]

@renanfranca very nice!! I knew markdown headers automatically could be used as tags, but I never thought about adding that little tag icon as well. I like that cause it encourages people to share links your blog.

@chadbaldwin I am glad that is useful to you👏

Now that so many people have used this tutorial to get started. I've considered writing a follow-up post on other features I've implemented in my own blog. Such as scheduled posts, updating my GitHub home page automatically, code copy buttons, comments using GitHub, automatic dark theme, rendering mathjax, how to get proper banner pictures for your blog posts when sharing to twitter/linkedin, etc.

That's so cool @chadbaldwin!!! I will keep reading your posts!!! I will subscribe to your rss 😄

[I-Am-Crumbles]

@chadbaldiwn Please update us here in the comments if you go through with this

Now that so many people have used this tutorial to get started. I've considered writing a follow-up post on other features I've implemented in my own blog. Such as scheduled posts, updating my GitHub home page automatically, code copy buttons, comments using GitHub, automatic dark theme, rendering mathjax, how to get proper banner pictures for your blog posts when sharing to twitter/linkedin, etc.

[TechnicalJonas]

Hello @chadbaldwin

Thank you for the wonderful template. Since I was new to GitHub pages, it took me awhile to get set up and know what I am doing. I am still figuring some stuff out.

I have some issues and need some help. My Blog Archive shows all of my blogs but when clicking to one I am getting a 404 page. I am thinking that the blog post link is not connecting properly, but I could be wrong. Is there something I am missing? Also going to http://CodingAdventure.github.io goes to a 404 page which I find it weird thinking that I did all the steps right.

here is my blog site: https://technicaljonas.github.io/CodingAdventure.github.io/

[TechnicalJonas]

I have seen my errors now. sorry about that.

still thank you for the wonderful template

[RobBowman]

Thanks for the template - was a great help to getting started. I have now added a 2nd post to my blog but a link hasn't appeared on the home page or archive? The site is at: https://github.com/RobBowman/RobBowman.github.io. Ay ideas?

[chadbaldwin]

@RobBowman hey! Looks like you forgot the .md file extension on your latest post. Just edit the file name to add .md to the end and it should work.

[RobBowman]

Thanks chad - that was easy :) I'd authored in vs code and the file explorer window was just narrow enough to hide the missing extension from me!

[m9s7]

this is perfect perfect perfect

[RobBowman]

I've used a github app called utterances so enable comments on my blog - seems to work well with Chad's template. I've made a few notes of how I implemented here: https://robbowman.github.io/2023/01/04/utterance-comments.html

[cjankowski0930]

Hi, How can I widen the second column in the footer where the social media links are>. The text of my social media is appearing below the icon and looks weird. Thanks.

[VioletGiraffe]

This is amazing, thank you for your work! I was able to very easily and quickly setup a blog following your template and instructions. And then I added comments in less than 5 minutes, a breeze! I also quickly added - with some help from ChatGPT - short excerpts that show up on the index page below each post's title. I think this is a great feature to help readers decide which posts thy want to read, and I recommend that each blog enables it. This is done simply by placing show_excerpts: true in _config.yaml, and it seems that the --- delimiter on your page can act as the cut-off line for the excerpt. Or you can just place the default invisible excerpt separator <!--more--> inside your post.

My only disappointment is that I tried a lot of different themes using remote_theme, and none is plug and play. It looks like most themes are not compatible with the setup this template uses. How did you change the color scheme for your blog, @chadbaldwin?

[chadbaldwin]

@VioletGiraffe Nice! Glad it helped! If you want to learn more about Jekyll, you should check out their site. There are a ton of great features you can use.

Here's the link to the minima theme, which is the theme the template and my blog uses. There are theme specific settings you can use (including show_excerpts): https://github.com/jekyll/minima/tree/2.5-stable

And then here's Jekylls documentation: https://jekyllrb.com/docs/

There's so much stuff you can do with it, it's pretty crazy.

As far as changing the colors, it's kinda cool how it works. I'm using a javascript library which dynamically creates a dark theme, on the fly, for your page. And there are options to tune it as well.

My site is set up so that if you have your system/browser set to dark theme by default, then it will use a dark theme. But if you have your system/browser set to light theme by default, then my site will use a light theme.

Check out this reply I wrote a while back in the comments that explains how to set it up:

https://github.com/chadbaldwin/chadbaldwin.github.io/issues/11#issuecomment-971835755

[jimroxodezi]

Please help! How do I include images to my post? I've tried several means, but the image won't render.

[tororutsu]

The fact that this is still going is amazing! @chadbaldwin great work on still supporting this! I still get the emails even tho i no longer use this set up.

[KarissaLowe]

Thank you so much for this blog @chadbaldwin! It is super easy and quick to set up a blog through this! I did not see an answer to TJPBray up above, but is there an easy way to change the background color or the entire site? Home page and blog posts?

[andreamoro-git]

@KarissaLowe you need to learn a bit of CSS and add a CSS file specifying the colors you want. It is not very difficult but this is not the place to explain CSS. If you really only need a different background color you may just specify a CSS specification on the header: try editing your _includes/head.html and adding the following inside <head> ... </head>. It may not work as intended but again, a full explanation of how CSS works requires more space and time.

<style>
body {background-color: red;}
</style>

[KarissaLowe]

Thanks @andreamoro-git! Unfortunately the simple fix didn't work. I'll have to learn more about CSS for this case then. Thanks though!

[ghost]

Can I use the stuff here to edit the config.yml file? https://github.com/daattali/beautiful-jekyll/blob/master/_config.yml

[nwithan8]

@jimroxodezi I use the <img> tag with a src pointing to a link to the images hosted in the git repository (the full URL, not a local path).

For example:

Some text

<img src="https://raw.githubusercontent.com/nwithan8/blog/master/assets/2019-07-09-what-does-the-ambient-music-reveal-about-me-1.png" alt="It’s not entirely clear if it’s no longer listening, or just not telling you it’s listening.">

Some other text

Renders this:

You'll need to include the image in your git repository so that the files will be hosted on GitHub to be pulled in and rendered. I store my images in an assets folder alongside the _posts folder:

[veraz00]

so cool! it encouraged me to shift from the hugo template to the github one!

[Mehrdadgpt]

THX, Is this Seo friendly?

[chadbaldwin]

THX, Is this Seo friendly?

By default, it has an SEO plugin enabled. So if you view the source of my blog posts, you'll see all the SEO stuff there. I've added HTML comments to indicate where the SEO plugin section starts and ends.

Speaking from experience, I can say it works...you probably wouldn't have found this post if it didn't. Many of my blog posts end up within the first few search results on google when looking up related terms.

That said, if you want to improve your SEO data on your posts, you can also use what's called "frontmatter" where you can supply additional metadata about the post at the top. It won't be displayed on the blog post, but it will be used by Jekyll/SEO plugin to add more meta properties in the source.

Here's an example from my last blog post where I included frontmatter at the top to provide more info for search engines and sharing on other sites:

https://raw.githubusercontent.com/chadbaldwin/chadbaldwin.github.io/main/_posts/2022-06-02-whats-new-in-sql-server-2022.md

Those fields get added to the metadata crawled by search engines. And the image tag makes it nicer for sharing on Twitter and LinkedIn as that's the image that will be used for the banner on your posts.

[chadbaldwin]

THX, Is this Seo friendly?

You may also want to include this in your config file so that it adds a sitemap for search engines to use for crawling:

https://github.com/chadbaldwin/chadbaldwin.github.io/blob/main/_config.yml#L70

[Icerider007]

How do you delete comments?

[chadbaldwin]

How do you delete comments?

The comments are all stored under a Github issue. So you just need to go to the GitHub issue for that blog post, find the comment you want to delete, and delete it.

There's a number of ways to get there. If you're on the blog post itself in the comment section, then you can click on relative date portion of the comment, for example "Icerider007 commented last week"...if you click on "last week" it will take you to the GitHub issue where the comments are stored.

[sleeping4cat]

How comments be added? Through utteranc.es

I tried a few methods but it does not render properly

[justindlc]

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

Thank you for writing out these steps. This worked for me but I wanted to note for anyone else trying to set up this blog if you have already created a main Github Pages site: under your repository > settings > pages under "Source" you'll want to leave it "Deploy from a branch" in the dropdown menu, and ensure it says "main" and "root" under "Branch".

Before seeing your comment here I had tried to download the blog files as a ZIP and then upload to my main website directory as a subdir. When I did that, it DID show up a little bit at mysite.com/blog HOWEVER it only showed minimal content -- the layout of the blog was not there (footer, etc.), and the test post was not showing up. So... don't do that anybody, do the above instead!

[justindlc]

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

One more comment (if you get notifications from posts here...) -- your blog is working well, however your Archive page has broken links to your blog posts:

https://andreamoro.net/blog/archive.html

Links there point to URLs like https://andreamoro.net/2023/08/18/how-to-include-LaTeX-in-a-docker-image.html which don't work since they omit the "/blog/" from the URL: https://andreamoro.net/blog/2023/08/18/how-to-include-LaTeX-in-a-docker-image.html

That must've just been something from the original repo that didn't get updated when you hosted it as a subdir instead of your main branch (I think!).

[andreamoro-git]

Fixed it, thanks! For some reason, the archive.md file needed the full {{ site.baseurl }}{{ post.url }} and not just the relative {{ post.url }}. I didn't follow my own advice above!

[khodayefilm]

Largely thanks! It was so helpful for me. Just one more thing... How can I put a Link on my blog post? and also picture?

[nwithan8]

Largely thanks! It was so helpful for me. Just one more thing... How can I put a Link on my blog post? and also picture?

https://github.com/chadbaldwin/chadbaldwin.github.io/issues/11#issuecomment-1652301988

[J-Furber]

Hello - this has been really useful! One problem I am having is that at the bottom of the homepage it says 'subscribe via RSS'. How do I remove this? Many thanks.

[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, or unsubscribe. 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