KrittIT Blog Setup Part 1
Welcome
My goal with this project was to create a simple, easily modified, fully featured blog. Throughout this part of the setup we will go through cloning the project, setting up node and npm, then changing the placeholder photos and customizing the css.
Initial Project Files and Setup
If you have git you can clone the project from https://github.com/40chalk/krittit-blog. If you don’t you can either go to the link above and download the zip file containing the project, or download git for your OS and clone the repository as shown below.
git clone https://github.com/40chalk/krittit-blog.git your-project-name
After you have gotten the project files you should have a directory that looks like this.
The only files you should change are in the global, public, and styles-page-global directories. Which we will start after we get npm up and running.
If you have npm installed skip down to the next section.
If you don't have it installed then go to https://nodejs.org/ and download the installer for your OS. After you have it installed you will open up your terminal and navigate to your project directory.
If you are on Windows press your Windows key and type cmd, then enter, and finally navigate to your project directory. If you are unsure how to navigate within your terminal I recommend this link to help you out. Once in your project directory type npm install, and after it finishes type npm run dev.
npm install
npm run dev
It should provide you with a link something like https://localhost:3000. Click the link or type it into your browser, and you will be able to see the initial blog ready for you to customize.
Images
Next you should replace the about, banner, mobile-banner, and logo(logo can be text instead of an image we will cover this later) images in the public folder with your own. If you view the images they show you what size in pixels the replacement photos should be around, in pixels. After you have replaced them if you reload your browser you will see the blog updated with your new images.
Styling and Fonts
For this next part you will need a text editor. If you are not sure what to use I recommend VS Code. In the styles-page-global directory open up globals.css.
At the top you will see an import statement for the font. You can replace the url in there with the font of your choice. Then set your font towards the bottom of the body selector, bellow the sizes. Both the --font-family-primary: and the --font-family-secondary:.
In this same file is where you will change the color scheme of the blog. At the top of the body selector you should see the following.
Change those to whatever you want and reload the browser to see how it looks. If you are having trouble selecting colors I recommend checking out https://huemint.com. Play around with it till you find a set that looks good then copy the color values over replacing the values set in the css variables shown above.
Next Steps
At this point the blog should be taking shape and starting to look like your own. In the next part of this series we will go over changing the text, title and metadata within the site.