Hi Cécile! I'm currently at the stage of creating the backend for my personal website which by the sound of what you described is very similar! I've spend years and years iterating over the design itself and now it's finally where I want it. Here's some suggestions I can make to try and save you from some pitfalls:
Don't spend too much time perfecting the design before you start building the actual website. Sure, it's great to know what you're going to build so that you don't have to change the codebase half way through. However, be mindful of the fact that the idea will keep evolving for as long as you're creating the website. The earlier you get on with actual development the sooner you will get to work on the more interesting features of the website.
Start with a static JSON (you've mentioned that the stack uses Vue) for the data and mock everything you will supply from the CMS. I haven't used Netlify/Forestry before but one thing that has already saved me a ton of time was not starting with the backend. This is only because being able to tweak JSON before I settle for how every blog post, excerpt and page looks is much easier than changing the underlying infrastructure and adapting it every time I wanted to add or remove some data.
Use some issue tracker to monitor the progress and break down the website to pages for front-end and content. Personally, I've started with some Lorem Ipsum text to fill the content where the blog posts/about etc. will go. Creating the issues on Trello/Gitlab/Github is a great way to see not just what's left to do, but how far you've come (and that's a great motivation!). I use Gitlab and I couldn't be more happy with it.
If you can, consider creating a staging or test environment where you can test how your website looks before publishing the new changes to the live version. Trust me, this can be extremely helpful if you want to evaluate new layout designs on the actual devices. You can protect these by simple password-based authentication using .htaccess files.
Finally, the stack I'm using at the moment still lacks a backend (using that JSON to finalise front-end) but consists of the following:
NodeJS (React front-end)
Gitlab (Git, issue tracking, CI/CD pipelines)
AWS S3 (storage for the CDN, separate bucket for the website code)
AWS CloudFront (website hosting based on that S3 bucket with website code, it's got great CDN solution)
Thank you for this very thorough bunch of advice!
This will surely save me some time.
For now I'm using "Gettings things GNOME" as a TODO app (haha) but it's only a temporary tool to get started and brainstorm some big-picture stuff before opening an IDE.
An actual issue/task tracker will surely help me once I do start coding.
Do you recommend GitLab instead of GitHub? I've used GitLab in my previous company and really liked it so, that could be a good option for me.
It's true that the design part, both visual and architectural is particularly interesting and piqued my interest (I downloaded Adobe XD to try and make mockups, for example) but I should indeed get to coding sooner than later.
I'll also be discovering VueJs, but I'm already familiar with EmberJS and (old) AngularJS so, I should not be too lost I guess.
I was using Gitlab before GitHub started opening up (was acquired by MS) and there were no features like free unlimited private repositories or free CI/CD which for me was a complete dealbreaker. Right now GitHub is a bit more competitive, but Gitlab, in my opinion, remains more feature-rich and seems to be more of a complete solution. No hacking, no extra plugins, just one platform in a to-the-point manner. If you've used it you already know this; you also know the UI and capabilities, so I'd stick with it ;)
I too used Adobe XD and it's particularly useful for getting early feedback on your design. Maybe try it this way?
Good luck!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Cécile! I'm currently at the stage of creating the backend for my personal website which by the sound of what you described is very similar! I've spend years and years iterating over the design itself and now it's finally where I want it. Here's some suggestions I can make to try and save you from some pitfalls:
Don't spend too much time perfecting the design before you start building the actual website. Sure, it's great to know what you're going to build so that you don't have to change the codebase half way through. However, be mindful of the fact that the idea will keep evolving for as long as you're creating the website. The earlier you get on with actual development the sooner you will get to work on the more interesting features of the website.
Start with a static JSON (you've mentioned that the stack uses Vue) for the data and mock everything you will supply from the CMS. I haven't used Netlify/Forestry before but one thing that has already saved me a ton of time was not starting with the backend. This is only because being able to tweak JSON before I settle for how every blog post, excerpt and page looks is much easier than changing the underlying infrastructure and adapting it every time I wanted to add or remove some data.
Use some issue tracker to monitor the progress and break down the website to pages for front-end and content. Personally, I've started with some Lorem Ipsum text to fill the content where the blog posts/about etc. will go. Creating the issues on Trello/Gitlab/Github is a great way to see not just what's left to do, but how far you've come (and that's a great motivation!). I use Gitlab and I couldn't be more happy with it.
If you can, consider creating a staging or test environment where you can test how your website looks before publishing the new changes to the live version. Trust me, this can be extremely helpful if you want to evaluate new layout designs on the actual devices. You can protect these by simple password-based authentication using .htaccess files.
Finally, the stack I'm using at the moment still lacks a backend (using that JSON to finalise front-end) but consists of the following:
Thank you for this very thorough bunch of advice!
This will surely save me some time.
For now I'm using "Gettings things GNOME" as a TODO app (haha) but it's only a temporary tool to get started and brainstorm some big-picture stuff before opening an IDE.
An actual issue/task tracker will surely help me once I do start coding.
Do you recommend GitLab instead of GitHub? I've used GitLab in my previous company and really liked it so, that could be a good option for me.
It's true that the design part, both visual and architectural is particularly interesting and piqued my interest (I downloaded Adobe XD to try and make mockups, for example) but I should indeed get to coding sooner than later.
I'll also be discovering VueJs, but I'm already familiar with EmberJS and (old) AngularJS so, I should not be too lost I guess.
Check Figma for mockups and designing. Its quick, stable and has good community resources :-)
I was using Gitlab before GitHub started opening up (was acquired by MS) and there were no features like free unlimited private repositories or free CI/CD which for me was a complete dealbreaker. Right now GitHub is a bit more competitive, but Gitlab, in my opinion, remains more feature-rich and seems to be more of a complete solution. No hacking, no extra plugins, just one platform in a to-the-point manner. If you've used it you already know this; you also know the UI and capabilities, so I'd stick with it ;)
I too used Adobe XD and it's particularly useful for getting early feedback on your design. Maybe try it this way?
Good luck!