Vasu's Notes
Posts Recipes Tags Categories
Vasu's Notes

Contents

Setting Up a Blog With Hugo, Obsidian, and Cloudflare

   757 words   4 minutes 

Here’s how I set up this blog (modified quick start instructions): https://gohugo.io/getting-started/quick-start/

  1. Install hugo (extended) from here: https://gohugo.io/getting-started/installing/
  2. Create a new site (step 2)
  3. git init
  4. Make an empty repo on github
  5. git remote add origin ... whatever, follow the instructions from github on uploading an existing repo
  6. Add the loveit theme: https://github.com/dillonzq/LoveIt (submodule add)
  7. follow step 4 (add some content), which will create a new folder content/posts/<filename>.md
  8. Open up the entire git folder as an obsidian vault, and then start editing the file you have under content/posts
    1. TODO: More obsidian setup
  9. start the hugo server (quickstart step 5)
  10. flesh out your content to something interesting, and then push it to your github repo
  11. start following the cloudflare instructoins on deploying a hugo site https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site#deploying-with-cloudflare-pages
  12. set the hugo version in your environment variables to the latest version of hugo (whatever you installed on your pc, check hugo version in command line), e.g. 0.92.2
  13. buy a domain from Google Domains
  14. configure a subdomain (like blog.vasuagrawal.com) within the custom domains section of your cloudflare page, with your own DNS provider, following the thing about adding a separate CNAME record
    1. host name -> blog.vasuagrawal.com
    2. type -> CNAME
    3. ttl -> 1 hour
    4. data -> link from cloudflare to <something>.pages.dev
  15. wait a few minutes for the records to all propagate through the dns tree
  16. enjoy your new blog

Adding disqus support

I did this part later on.

  1. Go to the disqus website and say that you want to install disqus on your website. You’ll probably also need to make an account.
  2. Stick with the basic (ad-supported) plan for now
  3. Copy the short name into your config.toml in the comments section, like below:
1
2
3
4
5
6
7
8

[params.page.comment]
  enable = true
  # Disqus comment config
  [params.page.comment.disqus]
	# LoveIt NEW | 0.1.1
	enable = true
	# Disqus shortname to use Disqus in posts
	shortname = "vasuagrawal"
  1. That should be all! Note that comments won’t show up on your local build (with hugo server -D), but will show up when you deploy with cloudflare after a commit and push.

Making your page show up on Google

  1. Go to the google search console.
  2. You should be able to click the dropdown in the top left to add a property. If you’re using the same account that you’re using for the Google Domain, Google should automatically detect that you own the domain and add the property to your account. If not, I think you’ll get some code that you can add to the params.verification section of your config.toml. See the loveit config for more details.
  3. Go to the URL inspection section on the sidebar, and then request indexing for your page if it’s not already being indexed. Fix any issues.
  4. Go to the sitemaps section on the sidebar, and add a link to your sitemap (which should be https://[YOURDOMAIN].com/sitemap.xml)
  5. You’ll need to wait a couple days for indexing to be complete, but after that your website’s posts should show up in google search!

Google analytics

  1. Go to google analytics, and then click on the admin panel in the bottom left.
  2. Create a new property for your account
  3. Create a new datastream, and get a measurement ID
  4. Add the measurement ID to the config.toml

Image support

As-is, Hugo and Obsidian don’t perfectly play well with each other when pasting images. This is because Hugo takes your static paths and strips out the static prefix before making the files available, which is really annoying. In other words, a link to static/filename.png is available at website.com/filename.png, not website.com/static/filename.png. The solution I came up with was to configure Obsidian to dump images into a local static folder, add that local static folder as a staticDir to Hugo, and then update the LoveIt theme to strip out the static prefix from the paths in the markdown file. This allows you to paste images, and have them be visible in both obsidian and on a hugo website.

To support the images, I also configured git lfs. This should help keep my storage space usage minimal.

Links still don’t work properly, but that’s less important to me so I’ll probably end up fixing it at a later date. This page might have some help.

References

Updated on 2023-10-14  89482e3
Back | Home