-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Comments] Building a Free Blog with GitHub Pages in Minutes #11
Comments
Thanks a lot! It`s really helpful!!! |
thank you! is it easy to add comments to a blog post like this? :) |
@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: 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 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 Then you take that configuration and plop it at the bottom of your 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 Hope this helps and happy blogging! |
@chadbaldwin do you mind telling us how to add other language for syntax highlighting ? I tried to do so, for c# : navigate to
but it doesnt seems to work, im sure im missing something :) |
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
|
Thanks so much! Do you know how I can add this blog as a page to an existing site I've already made? |
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
<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 |
@XenocodeRCE yup! I was drafting up a response as I saw your comment pop up. Just an FYI, you still need to fix your 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. |
@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. |
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. |
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. |
is there a way to customize the css of each individual blogpost? |
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! |
@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 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: As far as displaying images, I'll direct you over to this issue where someone asked me something similar: |
@rjahrj You should be able to add a I've done this in the past, see the code for this post: |
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? |
@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: 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
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 👍 |
That was so incredibly easy! Thanks so much, @chadbaldwin! |
Hi. I need a little help. |
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. |
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 |
Thanks for this. Got it set up but test posts aren't displaying. Was there another step? |
@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 |
Any suggestions for implementing tooltips with this template? |
Nice template, thanks for sharing. |
edit the head.html template and remove the relevant row |
@skmuiruri, you can disable it by commenting out the line 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: |
@andreamoro-git RSS settings are not part of the |
@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 |
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 |
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. |
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! My only disappointment is that I tried a lot of different themes using |
@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 And then here's Jekylls documentation: 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: |
Please help! How do I include images to my post? I've tried several means, but the image won't render. |
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. |
Thank you so much for this blog @chadbaldwin! It is super easy and quick to set up a blog through this! |
@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
|
Thanks @andreamoro-git! Unfortunately the simple fix didn't work. I'll have to learn more about CSS for this case then. Thanks though! |
Can I use the stuff here to edit the config.yml file? |
@jimroxodezi I use the 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 |
so cool! it encouraged me to shift from the hugo template to the github one! |
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: Those fields get added to the metadata crawled by search engines. And the |
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 |
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. |
How comments be added? Through utteranc.es I tried a few methods but it does not render properly |
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! |
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!). |
Fixed it, thanks! For some reason, the archive.md file needed the full |
Largely thanks! It was so helpful for me. Just one more thing... |
|
Hello - this has been really useful! |
There is a saying: Less is more! |
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...) |
@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 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: 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: 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. |
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: ***@***.***>
|
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. |
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 |
https://chadbaldwin.net/2021/03/14/how-to-build-a-sql-blog.html
The text was updated successfully, but these errors were encountered: