Many developers either have a personal website or would like to have one.

\
While there are many great options out there to build a beautiful website without any coding skills, we are software developers, so we want to showcase our skills and build something from scratch.

\
Coding the website is one thing, and you might get it done in 1-2 days. But once your website is live, you need to maintain it to ensure it’s available, up-to-date, and secure.

\
In the following, we will therefore take a look at how to build and maintain a personal website with minimal effort in 10 easy steps. Because, while we may love coding, we also love time away from the computer. :deciduous_tree::cartwheeling::spaghetti:

\
I will use my website which I recently rebuilt in React as an example. You can find the source code in my [GitHub repository](https://github.com/judicodes/judicodes-homepage-react).

\
The following tips and tricks assume a super simple, static website that only consists of a front-end part. However, you could easily extend these concepts to more complex projects including a backend, database, or other pieces of infrastructure.

\
We will not go into detail for any of the technologies mentioned, but rather give a high-level overview to keep it technology-agnostic.

## 1. Set Up a Repository

Pick a development platform like GitHub or GitLab, and set up a new, empty repository. Make sure to include a license and add a README, so that the community knows what they can do with your code.

## 2. Choose a JS Framework

Pick a JavaScript framework or library like React, Vue, or Svelte to use for building your website. Or don’t, and go with Vanilla HTML and JavaScript if that is something you want to try out.

\
When choosing which framework to pick, the most important thing is that it should be something you enjoy working with.

\
This is *your* website, and you get to use whichever tools you like. You could go with something you already know and like, or try something completely new that you’ve been curious about.

\
I built my first personal homepage in Vue.js. About a year later, I rebuilt it in React because I wanted to get more hands-on React experience and try out some React libraries.

\
Use the build tools of your JS framework to generate some boilerplate code, and get a simple Hello World-style example served on localhost.

## 3. Choose a UI Component Library

This step is optional, but since we are talking about keeping the effort minimal here, I would recommend including a UI component library like Material UI or Bootstrap in your project. I picked Chakra UI for my website.

\
These libraries come with a set of UI components as well as utilities for layout and styling and allow you to build super fast.

\
Make sure to choose a well-documented component library, that you find visually appealing, that includes many components, and can be customized easily. To customize the appearance of the library on your website, it can be fun to play around with fonts and color schemes. :art:

## 4. Build Something Super Simple

Think about the pieces of information you want to display on your homepage, and then just go ahead and build something using the components from your UI component library. Don’t overthink it.

\
The main goal now is to get something live quickly, and as Voltaire already knew, perfection is the enemy of good.

\
If you have a lot to say and many ideas for what to show on your website, that’s brilliant! Go ahead and build, but make a plan first for how to organize your content - think routing, different views, sections, layout, navigation, and so on.

\
But if you are anything like me, you might ask yourself, at this point, what to put on your homepage and why you should build one because WHO WOULD EVEN CARE?! :flushed:

\
Your feelings are entirely valid, but let me tell you, you don’t need anyone’s permission or fancy content to have an online presence.

\
Keep it super simple, and just share some things about yourself you feel comfortable sharing with visitors (which might be anyone with access to the internet - keep that in mind).

\
For my website, I kept it quite minimal with a picture and tagline about myself, a list of my tech stack, some things I like, and a few book recommendations. :books: I also included links to my LinkedIn and GitHub.

\

:::tip
When building the UI for your website, make sure it is mobile-friendly. Most UI component libraries include a grid system for responsive design, so it should be easy to make your website responsive from the start. Test it on different screen sizes and devices to ensure that all interactions also work well on mobile.

:::

## 5. Add Something Fun

In Step 4, we built something super simple, but simple should not mean boring. So now, let’s get interactive. :rocket:

\
Try to think of some easy ways to make a visit to your website more fun and interesting. That could include things like animations, user interactions, or color scheme changes. Don’t reinvent the wheel though.

\
If you have an idea of what to do, chances are there already is an npm package that does exactly that.

\
I went with a scroll animation for the navigation bar, a button to toggle between dark and light mode with a nice transition, and an icon button that starts a surprise confetti party using

[react-confetti](https://www.npmjs.com/package/react-confetti).

\
And that’s it, you’ve built yourself a website! :partying_face: Let’s see next how to deploy and maintain it.

## 6. Deploy

There are many options for how to deploy your website to the internet completely for free, like Netlify, Vercel, or GitHub Pages.

\
The exact steps will depend on the provider you choose, so follow the guides until your website is live under some URL.

\
I went with Netlify and found it incredibly easy to set up.

\
As an optional step, you might decide to buy a custom domain name and connect it with your provider’s DNS to replace the arbitrary URL you got. You don’t have to do that, but I find a custom domain name a nice touch, and buying a domain shouldn’t cost much more than 10$/year.


:::info
When setting your website live, you might also have to check your country’s legal requirements. Depending on where you live or host your website and what kind of data you collect from your visitors, you might have to include things like a legal notice or privacy policy.

:::

## 7. Set Up CI/CD

Now that your website is live on the internet, you want to make sure you don’t accidentally break it with future commits. You also want to automatically deploy the latest version of your `main` branch.

\
Your development platform might already come with CI/CD tools built-in, like GitHub Actions or GitLab CI/CD.

\
I’m using GitHub Actions since my repository lives on GitHub.

\
For Continuous Integration, you could set up some automated checks for every Pull Request and every merge to the `main` branch. That could include checks like linting&formatting or unit tests.

\
There are also many templates available, for example, I use a pre-built GitHub Action to discover vulnerabilities with CodeQL.

\
For Continuous Deployment, you could set up your own deploy script which runs on every push to `main` after all checks have completed. But depending on the hosting provider you chose in Step 6, you might not have to do anything.

\
Netlify, for example, integrates nicely with GitHub so that the `main` branch gets deployed automatically.

## 8. Use Dependabot to Keep Your Dependencies Up-To-Date

We built a website, we set it live, and now all we want to do is chill. But the JS ecosystem evolves quickly, and so do its vulnerabilities.

\
We want to make sure our dependencies are up-to-date to keep our application secure, but npm dependency management can be painful, and we most certainly don’t want to check for updates every day.

\
Luckily, there is a brilliant little tool called Dependabot that can take care of all of that for us. :robot: Dependabot is a tool created by GitHub for automated dependency updates. There’s now also a version for GitLab available.

\
All you have to do is add a `dependabot.yml` file and GitHub will automatically create Pull Requests when a new version of the packages you use is available. You can configure Dependabot in the YAML file, to set for example the Assignee for PRs and the maximum number of open PRs.

\
Since we set up some automated checks for PRs in Step 7, these will run with every Dependabot PR, and we can be sure that a new version won’t break our website.

\
In the repository security settings, you can also configure dependabot to alert you about any vulnerabilities in your dependencies.

## 9. Check for Accessibility Issues

Accessibility is such a strange topic - it is super important, yet often neglected, even though there are so many low-hanging fruits when it comes to improving a website’s accessibility.

\
If you use a JS framework and a UI component library, your accessibility score shouldn’t be completely terrible. It probably still can be improved, especially if you included custom fonts or color schemes.

\
You can run a tool like Lighthouse in the Chrome Dev Tools to discover potential improvements. Lighthouse will generate a report for you and suggest changes to improve accessibility.

\
These suggestions are usually easy to implement, like increasing the font size, changing the contrast between text and background, or rearranging the order of HTML elements in the DOM.

Lighthouse can also generate reports for performance, best practices, and SEO. :cool:

## 10. Run a Cron job to Ping Your Website

After I had set my website live, I felt the urge to check at least once a day if it was still there. 🕵️‍♀️

At first, I was happy every time I saw my website was still available, but then it quickly got boring.

\
To make sure you get notified automatically if your website goes down for whatever reason, you can set up a cron job that simply pings your website’s URL at regular intervals.

\
If your project includes a backend and DB, you could also set up some basic smoke tests which execute e.g. some `GET` requests on your API.

\
In my case, I just set up another GitHub Action which runs once a day and pings my page. Increase the frequency as you see fit for your homepage and the kind of traffic you are expecting.

## Conclusion

And we are done! For now, at least.

\
For me, my website serves first and foremost as a playground to try out technologies I’m curious about, so I like to modify it occasionally. I would encourage you to regularly revisit your website’s code and just have fun with it. :woman_dancing:

\
I hope this guide gave you an idea of how easy it can be to build and maintain a personal homepage. You could probably build something simple in 1-2 days (if you’re like me, add another two days to get the CSS layout right 🙄).

\
Deploying your website and adding some automation to make maintenance a breeze could be done in under 2 hours.

\
Looking forward to seeing all the amazing websites you’ll build! :star_struck:

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

The Lazy Programmer's Guide to Maintaining a Personal Website

Too Long; Didn't Read

@judicodes

RELATED STORIES