Navigate back to the homepage
WriteReadMe
★ VN

Build your Website with Novela Gatsby - Episode 1

This guide is to help non-developers to build their own website with the Novela theme

Trong Nguyen
July 5th, 2020

For who is curious about my website. It is built in GatsbyJS with Novela theme (a great them by the way). The code is hosted in Github. And I bought this domain trongnguyen.co from Godaddy.

In the past, I shared this post to share how I built this site. It’s about the building process, nothing relates to technical. So if you want to see a general look, visit that post first then come back to this one later.

After I launch the site, I have received a couple of emails from people asking for help to build their website, like my website. I’m very happy to receive their emails. I made me feel that I’m useful to someone else.

Most of them are non-coding ones: designers who want to build their portfolio, entrepreneurs who want to build a website to start their business,…

It’s very challenging when building a website without base coding knowledge. Even with a ready-set template like Novela. But we also don’t need a deep knowledge of coding bo to build it. Some basic understanding of HTML, CSS, and Google is just enough.

So I write this guide to help people out there build their own website with Novela theme. If you are not familiar with code and want to have your site, this guide is for you. This is not for developers because it’s very basic.

In this post, we will go through 4 steps:

  1. Setup/clone Novela project to your own Github
  2. Customize your site (optional)
    1. How to build a custom page
    2. How to build a portfolio page
    3. How to build a page from a data file (*.yml)
  3. Host your site with Gatsby
  4. Change to your own domain

But first…

Why we should build our website?

There are many services out there to build a website easily. Just drag and drop then you can have a good website in less than 1 hour. Just you need to pay a bit of money.

But I chose to build my website because:

I can experiment with new things.

I love the web. I know basic CSS and HTML, so I always want to see the code run and is live on my website.

I can customize and add anything I like.

I embed my Instagram posts and built my work gallery. If I use a service, I can’t do things like this.

In the long run, it’s easy to maintain.

Because the code is a built-in component level. When we change that component, every else will be updated accordingly.

Now let build our website by using the Novela theme.

For me, Novela the best free theme ever: beautiful in every pixel, carefully customized for desktop and mobile, and dark mode. And it came with very detailed documentation that guides us on how to use that theme.


Create your ‘Novela’ project on Github

The first step is to set up your project.

Thanks for the Narrative team for sharing a great open-source Novela theme.

To leverage the whole project, I recommend to clone the whole project and use it for your website. So we can customize anything we like, from the base theme.

We use Github to store our code, control version, and later connect with Netlify to bring our website live. It’s free, and almost unlimited storage. Github is a great choice.

The easiest way to create your project on Github from the Novela project is to clone it.

Go to Your repositories and click New to create a new project.

trongnguyen 2020 build your website 1

After creating your project, go to the bottom and select Import code then paste the Novela project URL to clone. If you like my website, clone my project which included portfolio and article pages.

On this guide, I used my website as starting.

trongnguyen 2020 build your website 2

Once you imported it to Github, clone it to your local machine and run it. If you know basic Git command, it would be much easier for you. But if you don’t, using a Git GUI app will make your process easier.

I’m using Sourcetree to pull and push code. Download it and clone your Github project from Sourcetree.

trongnguyen 2020 build your website 3

After you cloned your project to your machine, time to run it. You just need to know two commands (thanks to developers who build Novela, all commands are ready setup).

Open terminal from Sourcetree and run those 2 commands:

yarn: To run the project the first time. This command is like the “Install” button when you install any app on your computer.

yarn dev to run the website on your computer. Once the command running, you can see your website from this URL http://localhost:8000/

Yeah, you only need those two commands to run that project with your Terminal.

There are other commands to work with Git, one for adding changes you made in the project, one for upload code from your computer to Github,… But you don’t have to care about them. We can do all of it in Sourcetree and our code editor VSCode.

This is my process every time I add a new post or make any change for my website.

1. Create a new branch from master.

You can work directly on the master branch, but create a new branch will be safer. Because all the code in the master brand will be built to your live website. But with a different branch, you can control it.

trongnguyen 2020 build your website 4

2. Open Terminal to run your project

Click on the ‘Terminal’ at the top right to open the terminal so you can run your project.

Once you install your project with yarn, the next time, we just need one command yarn dev to run it.

trongnguyen 2020 build your website 5

3. Add a new post

Open your project from VSCode. Go to /www/content/posts/, add a new folder for your post. You can name that folder by date to make it more manageable.

trongnguyen 2020 build your website 6

Open the index.mdx page to add your post in a Markdown format. If you don’t know Markdown, google it. It’s very common. You just don’t pay attention to it.

Once you add your content, add that change to your Github by using VSCode UI (as I said, you don’t need to know that command)

trongnguyen 2020 build your website 7

4. Push changes to Github

Once you commit changes, now we need to push those changes to Github.

If there are changes, Sourtree will show how many changes at the top left on the “Push” icon. Click that button to push your code to your Github.

trongnguyen 2020 build your website 8

5. Merge your branch to the master branch

Go to your Github repo and merge your branch from there. Github provides simple UI to merge branch easier

trongnguyen 2020 build your website 9
trongnguyen 2020 build your website 10
trongnguyen 2020 build your website 11

When changes are merged to master, they are ready to live on your website.

The next step is to Customize your site, but it will be optional because it needs many customizations, and need some coding knowledge to do it. So I would skip this step to go to the next step: Make your website live on the internet with Netlfy.

Next

  • Host your site in Netlify
  • Change to your own domain
Hi, I'm Trong, product designer living in Singapore. I write to practice, and write to find ideas. Nice to meet you!
View all writing →

Sign up to my email list for updates

Be the first to receive my latest updates. No spam or share your email with any third parties.

More from Trong Nguyen

Things I wish I knew when I started designing

5 years in the design field is not too long. But it gives me many lessons that if I knew about it before, it will be a better designer than I am today.

June 27th, 2020 · 2 min read

Get a job as a product designer whithout going to design school

I got my job as a designer without going to design school. This is a guide to teach yourself design.

June 20th, 2020 · 2 min read
© 2018–2021 Trong Nguyen: tantrongtt@gmail.com
Link to $https://twitter.com/trongawesomeLink to $https://medium.com/@trongawesomeLink to $https://www.instagram.com/trongawesome