If you followed the entire series “Let’s Start from the Basics”, you’ll have a complete new website. The next step is to make it available online.
An awesome app to deploy our new site is Netlify. You can create a FREE account with them, upload your content to github or bitbucket, and you’ll have your website online for free. No paying for hosting!
You can also create a paying account in Netlify to get even more from them and you’ll probably need a domain name too. You can get a free domain name from dot.tk, but I would only recommend it for testing sites or playground sites, never for a more serious website. You won’t have control over your domain and they can take it again if they want. Popular websites to buy a domain name are NameCheap and GoDaddy.
Uploading the website to GitHub
In my case, I’m using GitHub, but you can use BitBucket too.
Note: Don’t forget to remove git from your theme if is a downloaded theme from github.
First thing, we need to make sure we have git on our project. If you write
git status on your console from your project root directory and you get something like:
fatal: Not a git repository (or any of the parent directories): .git
You don’t have Git. So, write:
$ git init $ git add . $ git commit -m "First commit"
Now, we are ready to “push” our code to GitHub. Form GitHub website, create a new project and fill out the needed fields.
Go back to the console and write:
$ git remote add origin https://github.com/aida-martinez/dg-my-new-site.git
Don’t forget to replace the url (https://github.com/aida-martinez/dg-my-new-site.git) for the one that GitHub gave to your new project.
And push your code:
$ git push -u origin master
You probably will need to write your username and password for the command to make its tasks.
Go to your GitHub repository and your code will be there.
Note: empty files won’t show up.
Create an account in Netlify, if you don’t already have one, and create a new site from Git.
Choose GitHub and Authorize Netlify. Choose the correct repository or do a search.
Last thing we need to fill out is which branch we want to use, in our case “master”, and write the basic build settings. Build command: hugo Publish directory: public
Hit “Deploy site”!
When I deployed this site I encountered some errors. I fixed them by including a
netlify.toml file on the root folder with:
[context.production.environment] HUGO_VERSION = “0.25”
This will say to Netlify that your Hugo version is 0.25 and that is the one they need to use to deploy the site.
Change the name of your site
Netlify will give you a random name for your site and an url. You can customize the name by going to settings and “Change the site name”. The name you pick must be unique, so be original.
From the “Settings” page you can also set up a domain name. If you don’t need one, you can keep the one that Netlify gives you. In my case: https://dg-my-new-site.netlify.com/
Fixing the url issues
If you visit your new site, you’ll notice that is not loading the css properly, amound other things. This is because in our
config.toml files we still have
the localhost as our base url:
baseURL = “http://localhost:1313/"
Change this to the new url and:
$ git add . $ git commit -m "Fixing broken links" $ git push origin master
Netlify will pick up your changes and deploy the website automatically. Isn’t it great?!
Visit again your new website and everything will look perfect!