I just finished building my personal site two weeks ago in my free time in this quarantine. After a long time always thinking, I decided to take a few hours each day and start with this project.
At first I went with a basic design using only HTML5 and CSS3. Where you could see my name, a brief description of me, some tags and my social networks.
It seemed good to me, but from my role as developer and architect, I did not feel comfortable with this and need to find a solution that allows me to have scalability and good performance.
Years working with different applications, had to put into practice the things I've learned and has helped me be a good developer.That was like a day decided to start reviewing it needed to accomplish this and how could share it with everyone.
The Tech Stack
In my search I started reviewing different technology options that can offer the following:
- 100% open source
- Good performance
- Continuous support of the community, and
- Ease of integration with other tools.
I decided to choose to use JAMStack because it allows you to have a modern web development architecture, based on client-side JavaScript, reusable APIs, and pre-built markup.
After reviewing various options I chose to use Gatsby because of my experience using React. I have already used this framework within the development of business applications and some freelance projects, and it has gone very well for me.
There are other alternatives that can check the following link https://www.staticgen.com/ and a comparison of the most popular on the following link https://www.gatsbyjs.org/features/jamstack/
After selecting the framework it is important to define what our Tech Stack, for this I decided to use the following:
- Framework: Gatsby
- TDD: Jest
- CI: Github Actions
- Host: Github Pages.
Hosting
Github pages, I find it excellent for everyone who wants to have a static page and display content such as a personal site (what I need), documentation, etc. In addition, my code will be hosted on Github.
Another alternative that you can review is to use Netifly or Vercel both have a free plan for all our public repositories.
For my personal site I don't need to have a lot of functionalities like functions, CMS, etc. If you think it is convenient that you are going to use any of these, check clearly what would be ideal for you. This is why I opted for Github Pages.
CI/CD
One of the features of Github Pages is that your site will be published by default from the master branch.
So taking advantage of this and since I am using Github as a repository for my code I decided to use Github actions. It was my first experience using this and apparently it did not go so badly and it helped me a lot to achieve my goal which was from my develop branch to be able to deploy to master when a Pull Request is approved.
For my repository consider having 3 branches:
- Develop: This is where I started coding my pages, components, styles and everything I need for my site.
- Docs: This branch I only use to document the markdown that will be seen when accessing my repository.
- Master: Branch where the compilation of what was developed in develop will be published.
The final result using Github Actions was as follows:
Testing
Always with some colleagues recommend that in your applications consider developing tests since the beginning of the development, as this will allow them to avoid failures at the time of output production, and to be certain that what they really are programming is what is being used.
For this reason consider important that my page will have the following tests: Unit tests and e2e tests.
Unit Tests
The unit tests will not give visibility that really nothing of the new functions that we are coding breaks in each execution. For this I decided to use Jest which allows me with few configurations and some additional plugins to generate a report like the following image:
E2E Tests
Although unit testing already helps us a lot within our projects, it is not enough just to give us an indicator that everything is fine, we must validate that a user interaction really works correctly and with the correct times. For this I decided to use Cypress, there are other options such as very good Codecept but Cypress, having a record test, helps a lot when developing this type of tests.
At the end to get a report of your tests run on cypress can help using Mochawesone and obtain the following:
Final result
The final result of my personal page using some architectural decisions allowed me to have the following achievements:
- Unit Test using Jest (33 tests)
- E2E Test using Cypress (71 tests)
- Integration with Sonar Cloud and Coveralls.
- Coverage at 99% (33 Tests)
- Internationalization (EN / ES)
- Documentation (README.md)
And then how is my website finally? Here I show you the final result:
- My personal site: https://ldiego73.github.io/
- The source code: Source Code
- Quality Code in SonarCloud: Quality Code
- The coverage: Coverage
What do you think?
I'd like your opinion on my personal site, the decisions taken at the level of architecture and if you have any comments feel free to comment or contact me on my social networks.
If you want me to publish how my site was developed, comment to make another post about this.
This is my first post that I write in dev.to and I hope I can post more topics.
Top comments (0)