Sanity.io Gatsby & Netlify Blog Setup (fail) then moved to Hugo and Github deploy (win)

I logged into Sanity.io using my Github account and there was a Project that I was interested in testing that I’d seen a video for which was the Kitchen Sink template, but noticed that there was also a Gatsby Template for a Blog post, so I thought I’d try that out instead:

After selecting Blog with Gatsby it came up with the items below:

• login to Sanity (TICK)
• Login to Github (yes)
• Connect to Netlify

Create project above, it creates a repository on github for you, then copies files across, and sets up Sanity Studio (you run that from Browser) and you also have link to Open in browser for webpage- see below:

Two tabs open, one for the web page blog & one for Sanity Studio dashboard

clicking on the first blog of the webpage shows you more tutorial information:

The first of the bottom links takes you to a tutorial post & video:

GRRRRRRRRRRRR

Bloody bloody!!!!! On git clone it asked me, for the first time EVER!!!! for the ssh key, or it said continue , I continued without it and then the whole damn thing didn’t work. So I was mogadored.

So I deleted the Netlify Project (of which there were 2, I must have created 2 instances of it) and then deleted the Github folder too. Then went into Sanity and started a project again.

Still couldn’t clone, tried setting up an ~/ssh key, and I couldn’t run the agent from the terminal so I ended up downloading Github desktop (apparently you don’t need ssh keys then. So an hour wasted getting back to where I started.

So I now have it on my PC opened in Code. Also on Netlify again:

Grr again.

I did the adding subtitiel but could not start the graphql-deploy, it errored out, so I couldn’t update it. So starting anotther build from scratch with git clone using the desktop. If that doesn’t work I’ll blow away github repo and start from there.

Netlify- continuous deployment

Only keep one site running from github. This will update and be accessible on web browser (not localhost) and all builds/updates deployed. It runs in a docker. See video below for usefyul settings.

It links to your github repo so any updating of repo will be deployed by Netlify straight away. So do not need back end (eg Node.js running) as it takes care of it.

For FREE account you can only have one continous build at a time, so only one project linked. Delete it after you have it working, then you deploy elsewhere (I need to research this).

Project tutorial

One nice thing with using Sanity and Netlify and Github is you use the same login (github) for all, so that is quite convenient. Currently doing an NPM INSTALL and that is taking a while to get going.

>NPM run dev this starts up gatsby on localhost:8000 and sanitystudio on localhost:3333. So can open both of those in browser tabs. Gatsby is running a graphQL queries and that can be opened in the browser too.

I couldn’t get sanitystudio on localhost:3333 even after all the reloads , so in the end I dropped this project and decided to go with Kitchen Sink.

In the KitchenSink video he puts the token in early, even before running the servers, I wonder if that is what I should have done in the Gatsby blog project?

Kitchen Sink project instead

On starting the Kitchen sink project, with Token setup I could link across to sanitystudio on localhost:3333, hurray, and graphQl on 8000 port and web page.

Now that I have all of that operational I will explore it furthur, at a later time.

Jamstack – (J)avascript(A)pi(M)arkdown(stack)

After watching a few more video’s I’m getting the idea of what a Jamstack website is, but I’m not sure that the Sanity.io is a Jamstack as it does not seem to feature markdown anywhere.

I watched a video on Hugo , which does seem to be markdown oriented.

A good simple demo in video above. But it looks pretty plain, so the templates are limited, I think the paid ones will be more versatile, a bit like wordpress themes I suppose.

The Jamstack does not talk about CDN , you can just have it local, so I could just build a site and upload it to server. I’m not sure if you use cloudflare whether it would copy the files across to its servers or not.

Its basically compiled into static files that can be held in your Github, as long as they are compiled and accessible, that is fine.

you need to update/compile the files if you update things like blogs, that is why there are things like Netlify that continuously rebuild the site on changes.

If your site is 95% static I suppose you can just update the little bits that you have changed (like individual posts , but you are still doing this in a localhost environment). Not quite as simple as doing a post in wordpress but blazing fast apparently. I need to set one up and host it on my server.

Markdown, images & video links etc. The other question is where do you put images and how do you manage images and videos in markdown. Yes you can but it looks like hard work, rather than just pulling them in, although something like forestry.io may be able to do that for you.

VS Code has some markdown extensions that can be used to speed up and preview the code.

I’ve just been playing with forestry.io which is a bit like sanity.io and you can choose where to put your images on setup so you find directories and it will copy the structure across to github.

Github SSL key troubles

I had this issue before and couldn’t quite resolve it. I was not permitted to do git push to github. The quixck solution was to use Github Desktop and that worked for a while, then I started getting issues with that interface too.

I was using Code Terminal, Command Prompt (in Admin mode) and still I couldn’t get the commands to run as they were written in the githubwebsite re ssh. I then found there was a git bash terminal that seemed to accept and run all the code required:

After finding that I was able to go through the complete process of setting up the SSH key correctly and now I can use VS Code terminal to do pushes and pulls.

I think the sanity.io put the ssh on the account. These perogrammes trying to make things easier cause more grief. I’ve been having issues with forrest.io & can’t quite figure out 1/how to use it & 2/ Why I’d use it without preview. I couldnt get the server running so no preview.

Hugo troubles

I followed the tutorial above” What is the Jamstack and lets Build one” for a Hugo install and am running into some challenges with compiling the static pages. On the Hugo server it all looks good, but running hugo to compile it is missing out the blog pages and only shows the menu.

> hugo server -D   (to start localhost server , it gives you a URL to follow)

There is a example in the Ghostwriter theme directory & I copied some pages/posts/projects across to the content subdirectory (where it looks to grab markdown pages to compile) and on a couple of the initial compiles none came across.

A few are coming across now but the config.toml file points the base URL to where the public folder is, I’ve repointed it to:

baseURL = "http://127.0.0.1:5500/hugo-ghostwriter-blog/public/"

I’m getting MIME blocking to the .css files, so all a bit of a challenge :

Also, I can’t host the master on github for the directory as the files are in Public sub-directory so I made another Git repo for just the public files and made it aGitPages so its a website with a link and that still gives me ugly like image above (in fact this is from public folder repo with the base URL) pointing to:

baseURL = "https://github.com/drakemax/hugo-public/"

So all a bit challenging. I did a bit of research and the logic is fine, in fact Hugo site has a tutorial on how to host on Github, and there are a couple of Vids that describe the process, the one below is brilliant in that it creates a /docs/ folder and buildis it in there:

Inside github pages there is theoption of website being located at master branch/docs folder, which is fine.

In the config.toml file you need to add the publish directory to:

publishDir= "docs"

The >hugo build wasn’t pinting to the right subdirectory/files although the inde.html was working. I was re-mapping to another site, I had to change the baseURL in the config file to ponit to my correct git repostiory (without the /doc at the end) and all was good. All the links to the blogs worked.

I’d made a couple of markdown files, initially they did not occur in the builds at all, the reason was, in the header, the draft: true so they were ignored, I had to change to draft: false (or delete the tag draft) . Also errors on the build as they were not showing up in the list of posts. I has — instead of +++ for upper and lower encapsulation of blog header , also title : “xyz” instead of title = “xyz”.

Once these were corrected the posts were built. I still haven’t got menu links working . Actually I wonder if the +++ is only required in this theme? I’ve seen other videos for hugo that use —-. I’ve just found there is an archtype folder that has the — and : instead of +++ and =, so maybe that needs to be altered:

Actually, there are two archetype folders, one in the main dir and also one under themes, and the one in the themes folder has the following template:

+++
title = "{{ humanize .Name | title }}"
description = ""
author = ""
date = {{ .Date }}
tags = []
draft = true
+++

So since we are using that theme, that is the one we need to follow (or copy/paste the themes one into the default one so they are consistant).

Menu’s & linkings in Hugo

I was going around ibn circles on this for a while, in the video above he cvuts/pastes a menyu in but the theme already has the menu built in, you need to go to Theme folder then theme/layout/partials/ and in this particular one its called navigation.html. There is a vid on this but slightly different structure:

For my site with ghostwriter theme you need to put, in the meta tags menu = “main” as below and it’ll come up on the main menu with the title sohwn on the menu.

+++
title = "About"
date = 2015-04-03T02:13:50Z
description = "Things about me."
menu = "main"
+++

This comes from navigation.html, as per image below, and by Weight (Lower weight gets higher precedence):

In the above imageI added weight = 10 to the about page meta & weight = 5 to the conact page meta so contact will come first.

Commenting in markdown on this site

I was wondering how to comment out in markdown, but apparently this depends on the parsing tool you use to convert markdown to html.

[//]:# (comment. All of this seems to be required for comment, text is needed in between brackets)

As I was running localhost:1313 server I could test out different things until I got something working. The above code works on multiline to the closing bracket. It wouldn’t work in the meta area but worked in the contents page.

Blog site

For this particular Hugo site it can be hosted on a static site like Github, in fact the link is HERE. The menu links all work and so do the blog pages.

I was a little worried about order , but there are a few methods using the meta data, see HERE. The Hugo docs I’ve used are quite useful.

End comment

I left this post to go and try playing with NEXT.JS and Vercel (Zeit) on building a blog from scratch. Next.js Static Site Generation (SSG) Tutorial & dynamic pages for a blog. At the end of that I was a bit dissapointed with the process as I thought it would just create a whole load of static pages, that didn’t and I can see why now, as it allows for dynamic creation of pages using an API. So I couldn’t just do a static hosting for it like a Github repository, and it needed a server to run the site.

I’m pleased with the structure, and have enjoyed having the server up and running to check on the changes. This was definitely easier to do than the Next.js project, but that one has some real power for ynamic content.

I loved the easy way to host it on github, that is really handy, it means I can do some development sites and have them setup on Github to review.

I’m wondering about building a blog on github about my process/learnings with Hugo and other Jamstack sites.

Two issues

1. Speed. As these pages/sites are small, I’m not sure of the speed of them. I need to build more sophisticated content so that I can see how fast it does run.
2. Updating. To write a blog I do that in Code then Hugo build and then git push to github hosting. A bit of a process for writing an article, much easier on wordpress.

I can see that continuous deploy with something like netlify works, but for blogging a single article its a bit much. You’d need to write a few and then do an upload, or have an automatic script to do some of the work.

Content and content type will need exploring, my blogs are not text only so I want to explore howe to put images/videos and links into the posts too.

I think the Hugo would have been the better place to start, then move onto Gatsby & Next.js. Now I know the concepts I feel a bit more confident about playing with Jamstack. It doesn’t seem to be as complex as wordpress PHP and in fact reminds me of Silverstripe.