Over the past year, I have slowly rebuilt my personal website (this one!) from scratch. Doing so let me learn and use tons of different technologies throughout the entire web stack. While I was building this site, I had to do tons of Googling/StackOverflowing, because all of the tutorials and resources I wanted to use were widely spread around the web. I wanted to take this chance to do a full write-up(/compilation of tutorials) on how to start from nothing and build up a full website, leaving (almost) no details out. Enjoy!
I built the front end of this site using only two external dependencies: React and React Router (no CSS frameworks!).
Most of the code is fairly common stateful React component management, so I won't go into it here; however, I did want to mention my animation component, which I made to manage the CSS page transitions on the site. I found that React Transition Group is fairly difficult to combine with React Router, so I instead built a PageAnimationWrapper component to handle page transitions.
The component functions as a wrapper that holds each Route component and manages when it is visible, using CSS classes to fade the page in whenever it becomes visible. The way it does this is by keeping one state variable,
show, which tracks whether or not the page should be shown at the moment. The key display code is
1 2 3 4 5 6
which calculates the CSS class,
page-0, which are visible and invisible, respectively, and loads the page if the
show state is set. The state is set through a prop,
mounted, which is used to set/unset
show every time it is updated. Check out the code for the full details.
Web styling is done using Cascading Style Sheets. However, directly writing CSS is extremely painstaking, so I opted instead to use a CSS preprocessor: SASS. A CSS preprocessor is essentially a language that provides features that make writing CSS easier and compiles down to basic CSS - in particular, SASS includes for/if control statements, variables, and nested styling rules. To get started with styling websites, I recommend going through these CSS Tutorials and then the SASS Tutorials.
In order to make the structure of the website more manageable, I created my own grid system, based heavily on the grid system in Bulma. You can check it out here - it uses the for loops in SASS to concisely declare a responsive 12-column grid system. This file demonstrates the power of SASS to significantly improve the styling experience. Besides the grid, I also created a CSS reset file that combines elements from several popular resets (see here). Finally, on top of that I declared several basic site styles, making extensive use of SASS's variables in order to easily declare and use a consistent color/sizing scheme throughout the site.
It is easy enough to learn the various technologies I mentioned above individually; however, it is much harder to actually get a real React development environment set up, so I will walk through a minimal environment setup. It is worth noting that, instead of making your own setup, you can just use Create React App, but it is fun to see all the different tools used.
The key packages are Babel, Webpack, and Express.
All of these steps can be included as part of the Webpack bundling process through various Webpack loaders and plugins. Loaders allow you to incorporate third party tools, such as Babel and PostCSS into the bundling process, in order to accomplish the transpiling and postprocessing. Plugins on the other hand are mainly extensible Webpack tools that allow you to customize the bundling process, including plugins to split the CSS out into separate files and create HTML files with the bundles included. I would recommend checking out the Webpack Concepts in order to get started. Afterwards, check out
to get a full Webpack config.
The final portion of the development environment is the development server. While we are developing, we generally want to have a quick server to test out the website and make incremental changes. There are two main options to set up a development server. The easier of the two is webpack-dev-server - a configurable dev server that serves the bundle straight from the webpack build. This is a good and easy to use option that includes many features that make development fast. The second option is using Express and webpack-dev-middleware. These two tools are what webpack-dev-server uses behind the scenes, but you can directly use them to set up your own custom dev server, at the cost of a greater amount of initial set up time. If this sounds interesting, it is definitely cool to set up a basic server to get a feeling for how it works.
After getting familiar with all the tools I mentioned here, you might find it useful to check out my repo for this website to get a feel for what a full environment setup might look like.
I hope you enjoyed this write-up and found it useful to get started with web development. Check back soon for Part 2: The Back End!