Setting Up a Blog With Hugo, Obsidian, and Cloudflare
Here’s how I set up this blog (modified quick start instructions): https://gohugo.io/getting-started/quick-start/
- Install hugo (extended) from here: https://gohugo.io/getting-started/installing/
- Create a new site (step 2)
- Make an empty repo on github
git remote add origin ...whatever, follow the instructions from github on uploading an existing repo
- Add the loveit theme: https://github.com/dillonzq/LoveIt (submodule add)
- follow step 4 (add some content), which will create a new folder
- Open up the entire git folder as an obsidian vault, and then start editing the file you have under content/posts
- TODO: More obsidian setup
- start the hugo server (quickstart step 5)
- flesh out your content to something interesting, and then push it to your github repo
- 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
- set the hugo version in your environment variables to the latest version of hugo (whatever you installed on your pc, check
hugo versionin command line), e.g.
- buy a domain from Google Domains
- 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
host name-> blog.vasuagrawal.com
ttl-> 1 hour
data-> link from cloudflare to
- wait a few minutes for the records to all propagate through the dns tree
- enjoy your new blog
Adding disqus support
I did this part later on.
- 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.
- Stick with the basic (ad-supported) plan for now
- Copy the short name into your
config.tomlin the comments section, like below:
- 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
- Go to the google search console.
- 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.verificationsection of your
config.toml. See the loveit config for more details.
- 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.
- Go to the sitemaps section on the sidebar, and add a link to your sitemap (which should be
- 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!
- Go to google analytics, and then click on the admin panel in the bottom left.
- Create a new property for your account
- Create a new datastream, and get a measurement ID
- Add the measurement ID to the
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/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.
loveit theme: https://hugoloveit.com/theme-documentation-basics/
interesting notes website: https://notes.alexkehayias.com/proof-of-worth/
another well themed blog: https://marco.kamner.eu/notes/technology/obsidian/publish-obsidian-to-personal-site/
full list of hugo configuration: https://gohugo.io/getting-started/configuration/
all available environment variables for cloudflare: https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables
adding custom cname record cloudflare: https://developers.cloudflare.com/pages/get-started#adding-a-custom-domain
hugo notes on comments: https://gohugo.io/content-management/comments/
hugo notes on google analytics: https://gohugo.io/templates/internal/#google-analytics
helpful blog post on google analytics with hugo: https://gideonwolfe.com/posts/sysadmin/hugo/hugogoogleanalytics/