A Guide To Maintaining A Personal Website.
10 Steps To Maintaining A Successful Personal Website.
If you have a personal website and you coded it yourself, brilliant! You must not think now you have your personal website up and running that you never need to do anymore. Wrong! Like anything, you want it to keep performing. So you must maintain and optimise.
This will include updating any information or links. Where people can communicate with you and keep it secure. Remember this is your front of house. I have put together X amount of touch points to not only help you build but maintain your personal website.
Set up a new repository on a development platform. I use GitHub but other popular ones are GitLab, Bitbucket and Jenkins. Include a README so that others know what they can do with your code.
2. Choose a JavaScript framework
Pick a JS framework you like to use. Opt for the most up to date version of the framework you enjoy developing with. That way when building or maintaining your website it'll be fairly streamlined.
If you're thinking I want to play around with a new framework but don't have a personal website yet. Maybe stick to what you know right now and in future rebuild your portfolio with a new bit of tech you are learning.
3. Pick a UI component
If you want, you can add a UI component as it'll streamline your website. This will allow you to speed up the building process. Go for a well documented component library, one you find visually appealing and can be customised easily. This stage can be fun but if you're not careful you can end up spending hours choosing which shade of purple to use.
4. Keep it super simple
Make the build super simple. Think about what you want to display. Its content, information and go ahead and build it using the UI components library. Don’t overthink it. Start with no more than 3 colours, minimal text and sections. More can always be added.
5. Add some fun
Use a certain colour or have something interactive. Animation isn't really my thing but if it's yours go wild! I like things like light and dark mode or button hover colour changes.
6. Deploy you efforts
There are a ton of ways to deploy your website to the internet. Things like Netlify, Vercel or GitHub pages.
How to do it exactly will depend on which option you choose. Check out their respective documentation. Follow the steps and your website will be up and out there in no time.
7. Set up CI/CD
To ensure you don’t break your website with future commits. You'll want to automatically deploy the latest version to your MAIN branch.
Recommended by LinkedIn
If you're using GitHub, you could set up automated checks for every PULL REQUEST and every merge to the MAIN branch.
Netlify for example integrates nicely with GitHub. So that the MAIN branch gets deployed automatically.
8. Keep your efforts up to date.
The whole point of this article is to maintain and optimise your website. There are a few things available to help you. One of these is Dependabot. Tech moves fast-ish, and so do vulnerabilities.
To keep up to date and secure we could use npm dependency management but that can be painful. Fortunately for us there is a tool called Dependabot. That can do automated dependency updates for us.
You can also set up Dependabot to alert you about any vulnerabilities in your dependencies.
9. Check accessibility
How does it work for others? It's something that is not really thought of by many but it is super important. There are quite a few simple ways to improve your website accessibility.
You can run a lighthouse in the Chrome Dev Tools to assess accessibility and potential improvements. Lighthouse gives you suggestions on how to improve accessibility.
Lighthouse can also give reports on performance, best practices and SEO.
10. Ping your site to feel warm and fuzzy!
Check your site works. Now some may choose to check on their beautiful website creation on the daily. I don't have time for that. What I do have time for is to set up a cron job that pings your website's url at regular intervals.
If your website has a backend to it and maybe even a database. You could set up a basic smoke test which carries out some form of action. Request an API or something like that.
I have a GitHub action setup which runs every other day and pings my website. This of course can be tailored to your individual requirements.
Conclusion
There we have it! Keeping on top of this list will keep your front of house looking fresh. More importantly up to date aka professional.
I hope this guide gave you a steer in the right direction or maybe reminded you to check in on your website.
Hasta Pronto.