Super simple guide to building your own personal website in one day

The other day, after reading many of the amazing resume building posts on dev.to, I received a burst of inspiration. I was going to build my own - the only question was: Where do I start?

I'm not much of a creative genius myself, so I usually leave that to the UI professionals. So rather than building a Bootstrap theme from scratch I did some Googling where I stumbled upon a great resource: Start Bootstrap.

Start Bootstrap is an awesome website created by David from Blackrock digital. Almost all of his themes and templates are not only free and look amazing, but are super simple to use too.

Heres how I did it.

Installing

1. Head to Start Bootstrap.
2. Pick a theme or template that you like. (I chose 'Resume')
3. Fork or clone the theme from Github or even download the source if you prefer and place it in an easy to access folder.
4. From the newly created folder in your favourite terminal, run npm build.
5. Run gulp dev from within the same folder,
6. Enjoy!

If you've been playing along at home, you've probably noticed that your favourite browser's just opened a new tab with a fresh copy of the site you just setup. But how do you personalise it?

Luckily for us, that's also super simple.

Customising

1. Customise colours in the file /scss/__variables.scss - primary and secondary are the main ones you want to change here.
2. Edit the text in index.html to say whatever you need it to say.
3. If you're comfortable with simple HTML, CSS and Bootstrap you can customise things like menus, add images or change fonts/layouts to suit your style.
4. Thanks to gulp dev, the website will update in your browser as you make your changes.

A great resource for images is undraw especially as you can colour match your primary colour from your bootstrap theme.

Deploying (for free!)

1. If you haven't already got one, create a Github account
2. Create a new repository named username.github.io the username must match your Github account name exactly!
3. Commit the contents of the folder you've been working with to your newly created repository.
4. Head to yourname.github.io and checkout your new website

For more information about Github pages, checkout the docs here

Thats all there is to it!

You can see what my site looks like at campbellbartlett.github.io - let me know what you think. If you think you can improve it, please let me know; I welcome all contributions.

I hope you found this helpful.