I discovered a Chrome app called Classeur, and it looks really cool and neat to compose all my text using Markdown. I decided to add this as part of my listed tools below.
I decided to add an experimental feature for my Tutorials section. I call it the Let’s Build Projects series.
Here, I’m going to showcase some step-by-step process on building one particular personal site for both educational and tutorial purposes, using brand-new techniques that I’ve recently learned and put them to good use. I thought that by chronicling my site-building process like this, not only that it will help me understand these new techniques myself, but it may also inspire others who are curious and would like to build their sites using the same techniques too.
I am by no means an expert, but more of someone who likes to experiment with a lot of things. Eventually, the more I put what I’ve learned to good use more often, the more I become an expert, like with everything else.
So, here is my very first Let’s Build Project: a commemorative rebuilding of my very old shrine called Cherry Blossom, Little Wolf. This is a shrine dedicated to the very cute couple from one of Japan’s most memorable manga/anime series, Card Captor Sakura by world-renowned manga group CLAMP, Sakura Kinomoto and Syaoran Li.
A bit of history with this shrine…
When I first built it back in 2001, it started off as a fanfiction collective, as the series was at its very peak amongst website hobbyists and manga/anime fans. Eventually, I lost interest and abandoned it, moving on to different interests.
Then some 7-8 years later, back in 2013, I attempted to reopen the same site with the same name, but it was more of a standard WordPress-powered blog that only chronicled the progress of some Sakura & Syaoran fanfics that I started from those same number of years ago but never finished. Then, when I decided to open my fiction writing site under my new author pseudonym, I closed down the Sakura & Syaoran fanfics blog to integrate it with this new site.
So now, here is the third time that I will be rebuilding this site. It’s because that it’s 2016, and from this date, the Card Captor Sakura manga made its premiere release in Japanese bookstores on May 1996— as of this writing, only a few weeks short before its exact 20 years. Because of CCS’s 20th Anniversary, I decided to reopen again to show my commemoration to the series, and of course, to show off my love for this adorable couple once again.
What will this site consist?
This brand-new rebuilding will also feature in plain HTML, but with brand-new arsenal. Here is my proposed plan on how I’m going to build the new version:
- Materialize CSS – for the overall skeletal layout, and because it is one of today’s top CSS frameworks like Bootstrap and Foundation, this site will also be responsive too.
- Hugo – This is one of the top static site generators known around and all about. There is also the most popular, Jekyll, but because I am a Windows user, Jekyll doesn’t have much support for the Windows platform, so I’m using an alternative instead. Because Hugo also has its built-in server that we can test on, all of my testings will be on my computer, so expect a lot of annotated screenshots and code blocks.
- Markdown – All static site generators and GitHub use Markdown as their default markup. You will see a lot of “.md” files, but the final site will all have “.html” extensions in them. There is a reason why I started my tutorials section with Markdown first. I currently installed a Chrome app called Classeur, therefore, we will be taking care of all our text content using this app.
- GitHub – For this site’s repository and also to track down all the changes I’ve made in the core files and that I can always get back to the previous versions if I mess things up without starting all over again. I’m also updating its README.md file for the latest news/updates regarding the progress.
- CMDer – This is a console emulator that I’m using, which is a lot more streamlined than Windows’ default command line/CMD. It also looks similar to the Linux and Mac OX consoles, so it’s a whole lot easier for me. You have to have a basic familiarity with the console/command line to work with Hugo installation to your computer, as well as being used as a development server for Hugo, and also to push files directly to your GitHub repository, which is why a console/command line tool is listed here. I highly recommend CMDer for all the Windows users out there.
- Brackets – My current text editor of choice. Because Adobe builds it, I can integrate Brackets with Adobe Photoshop CC; once I start building a wireframe of the overall look.
- Adobe CC – For the graphics editing, of course.
- Dropbox – To host the website for testing and tutorial purposes.
- Let’s Volt IN! – My site collective. This shrine will be located on a subdomain: http://sakusyao.lets-volt.in. The final completed site will officially be hosted here.
The list above may look a little too much compared to how I built the first version some 10+ years ago, but these would help me build the site faster.
Regarding GitHub, I already created a repository for this site. You can find all the info regarding this shrine by reading the README.md in there. I thought about opening a tutorial on Git and GitHub, but there’s plenty of resources out there on the net. I recommend starting off with the official GitHub site first and check out their documentation.
When do you start?
This will be a long process, so please do bare with me. I would usually start off by building up the “default” contents first before I deal with the wireframing and building of the layout/theme. I will be focusing this “Let’s Build Project” on building the site itself, so the contents that I’m working on will not be written here, but I will mention it in the repository README.md file, for more convenience. Once I get everything finalized, I can finally start.
So, in short, stay tuned!
Sharing is Caring!
- Click to share on Twitter (Opens in new window)
- Click to share on Facebook (Opens in new window)
- Click to share on Tumblr (Opens in new window)
- Click to share on Pinterest (Opens in new window)
- Click to share on Pocket (Opens in new window)
- Click to share on Reddit (Opens in new window)
- Click to share on Skype (Opens in new window)