For those who are interested in learning more about Jamstack, we show how to deploy a server-less site in minutes.
...ideal if you want a useful personal blog that is customizable, very fast, and completely free.
The complete process is browser-based. There's no code to write or commands to send from a console. You will have full access to all the files in your own GitHub repository and many options for controlling your site's deployment using Netlify. This includes setting up your own domain and changing the structure and design of your site.
This guide explores how a static site generator compares to more traditional methods of web publishing. It's not suitable for major projects or anything mission-critical. It is ideal if you want a useful personal blog that is customizable, very fast, and completely free.
To complete this guide, you are going to need a Netlify account and a GitHub account. Everything will work fine on the free tier of both platforms. There's no cost and no need to enter any payment details.
However, it's worth checking the pricing/plans of Netlify and GitHub to make sure you know exactly what they provide for free, and any limitations, e.g., personal projects only.
If you already have a Netlify account, then log in and visit your User Settings. Check you have set a password on the account, as you'll need it later on. Then jump to Step 3.
If you already have a Netlify and a GitHub account, then jump to Step 4.
We've selected a specific Netlify CMS blog template to use with this guide. We chose it because it offers a good set of features without requiring any additional configuration. It is a fork of Erick Patrick's original.
There's an apparent bug in NetlifyCMS that means that you cannot add a password from this link. The path needs to be changed to include admin.
Change the link in your browser's address bar so that it includes admin/ as shown below, then press Enter/Return on your keyboard.
A form will appear. Enter a new password and submit the form (see image above).
You should now see the Admin view of your new blog and it should look something like the image above.
The site Admin View lives at the same address as the Site view with the path /admin added. Opening a browser tab for each is an easy way to switch between the two. For example:
Explore the interface to discover how to create and manage blog posts. The template has all the functionality needed to build a basic blog. It also has some more advanced features, including workflow and a search tool.
Deploys are automatic
When you make your first post you will expect to see changes in the site view. Remember that this is a static site? The changes you make need to be deployed to your GitHub repository. This is done automatically by Netlify, but it will take a couple of minutes. You can monitor the process in the Netlify Deploys view. You'll need to reload your site page to see the changes once they have been deployed.
The sub-domain name provided by Netlify is free, but for a few dollars, you can choose your own. The cost to register some of the cheaper domain names is around $5 for the first year.
Finding a name that is not already registered is often the hardest part of this process. Head over to TLD List to find out what's available.
Making the change
After registering a domain name, visit Domain management in your Netlify settings and click the Add custom domain button.
Netlify will look up your domain. Click the Yes, add domain to confirm that you own the domain.
Ignore any warnings about https. Click the Domains link under Domain Management in the side menu. Then click Check DNS configuration alongside your domain's entry in the list.
A pop-up window will display the four Netlify Nameserver addresses that you need. Replace the default nameserver addresses at the registrar you have chosen with the Netlify addresses.
It can be difficult to find the nameserver settings on some registration websites. We used Porkbun because they are cheap and make it simple to find and change a domain's settings. If you're with Porkbun, then just follow the link shown in the image above.
Nameserver changes need to propagate across the Internet before the change will work. This usually takes a few minutes, but be prepared to wait up to 24 hours.
As a bonus, Netlify will automatically set up HTTPS for your domain. This encrypts communication between your site and your users.
Making site changes
You deployed your blog to a GitHub repository in Step 5. That is where you will find every file needed to create the site's style, structure, and content.
When any file is changed, Netlify redeploys the site automatically by default. There is a limit to 'deploy time' in the free tier. It's wise to turn-off automatic redeployment if you are going to make a lot of changes. You can preview changes without using deploy time, and only when you are happy with the changes, manually deploy the site.
Making changes can be done easily, once you know the purpose of the individual files. Edits can be made directly in GitHub. If you want to use your own development environment, take a look at this setup guide.
Don't worry about mistakes when making changes. Netlify keeps a record of all deployments. If your site stops working, then just redeploy an earlier version. No stress!
Change the blog name
Open your repository on Github and view the file listing. Click on the name of the file config.php. When the file is open, click the pencil button in the file header.
Change the content of lines 8, 9, and 10 so that the text in quotes is what you want for the site name, site description and author. Check that you have retained the single quote marks at the beginning and end of each of these changes. Don't change anything outside of the quotes unless you know what you are doing.
Scroll to the bottom of the page and click the Commit button. Netlify will redeploy the site. Within a few minutes, you should see the changes go live. Refresh or restart your browser if the changes don't appear.
Change the blog logo
The logo is currently a blue cube, but you can change it to anything you like. It easy to create simple shapes using Method. Save the file as SVG, and it will scale nicely.
Return to the file listing on GitHub and navigate to /source/assets/img. Click the file name for logo.svg and then the trash button to delete the file. Don't click Commit just yet.
Go back to the img folder and click the Add File button and choose Upload Files from the dropdown. Drag or choose your replacement logo.svg file. Then click Commit changes, and both changes will be made, triggering one new deployment.
Within a few minutes, you should see a new logo on your blog.
The blog favicon can also be changed. Use an online tool like favicon.io to create a new favicon. Replace the file called favicon.ico in the /source folder with the new version.
It may be free and bulletproof, but how good is your shiny new blog?
Head over to Measure to do some heavy testing. Enter your blog URL and run an audit to see the metrics.
In the results for sandywood.net some Accessibility aspects can be improved (see image above). These relate mainly to the visual design of the template. By the time you read this, those changes may have been made!
We hope you found this guide interesting. If you create a blog, let us know in the comments and we'll take a look!