I want to become more familiar with JavaScript. In order to do this I have decided to recreate this blog using node.js, express, and pug. Keep in mind this is not necessarily a tutorial, but more of a journal of my attempt to learn JS.
Enough chit chat, leggo.
This is the link to the blog in its current state if you are interested.
- First off, I wanted to find a template project so I could see how someone who knows what they’re doing sets a project up. In my case I used this project on github created by gothinkster. I like the simplicity of this project. It has everything I need and nothing else that would make it confusing.
- I cloned the project to a folder on my pc and opened it up in VS-Code. I also went ahead and created my own private repository with this project. I did this so I can use continuous integration and deploy the site easly.
- With VS-Code open, the first thing you need to do is open an integrated terminal and add node-modules using the command
npm install
If this doesn’t work for you, wou likely need to install npm first.
- With npm installed we can run the project with
npm start
This will start up a localhost session on port 3000. The link to the app should pop up in the terminal but if not you can manually type in “localhost:3000” to view the index page.
- Any time I work with html, or in this case pug, and I know I’m going to have multiple pages with similar layouts I like to break off the header and footer sections into their own files which can be imported into each new page.
//- Include the navbar / header include includes/header include includes/sidebar
And the Header.pug file with the Navigation bar:
doctype html html(lang='en') head meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') meta(name='description', content='') meta(name='author', content='') link(rel='icon', href='/favicon.ico') title Navbar Template for Bootstrap link( rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha256-NJWeQ+bs82iAeoT5Ktmqbi3NXwxcHlfaVejzJI2dklU=" crossorigin="anonymous" ) //- link(href='/navbar.css', rel='stylesheet') link(rel='stylesheet', href='/stylesheets/style.css') body nav.navbar.navbar-expand-md.navbar-dark.bg-dark a.navbar-brand(href='/index') Code Nerd button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbarsExample04', aria-controls='navbarsExample04', aria-expanded='false', aria-label='Toggle navigation') span.navbar-toggler-icon #navbarsExample04.collapse.navbar-collapse ul.navbar-nav.mr-auto li.nav-item.active a.nav-link(href='/index') | Home span.sr-only (current) li.nav-item a.nav-link(href='/projects') Projects li.nav-item a.nav-link(href='/hacking') Hacking li.nav-item a.nav-link(href='/aboutme') About Me li.nav-item a.nav-link(href='/contactme') Contact Me li.nav-item a.nav-link(href='resume') Resume form.form-inline.my-2.my-md-0 input.form-control(type='text', placeholder='Search')And the Footer.pug
br p © My Badass Blog br script( src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous" ) script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js" integrity="sha256-pS96pU17yq+gVu4KBQJi38VpSuKN7otMrDQprzf/DWY=" crossorigin="anonymous") script( src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha256-DiWJXXyq81WlPRnDfGmgYZj2aOVCKyEdJ1l+2TmDuAs=" crossorigin="anonymous" )
Notice the footer contains script tags pointing to bootstrap. I’m using bootstrap here because I’m terrible desigining frontend stuff. I like using premade elements that I know look good.
- In the views folder I created pug files for various pages on my site. I also put the header and footer files in a subfolder called includes. The pug syntax was weird at first but This is one of the pages called projects.pug.
//- Include the navbar / header include includes/header .container br main(role='main') .jumbotron .col-sm-8.mx-auto h1 Projects! p | This is where I'll post about my most recent projects. My projects reflect what I'm currently interested in. If you have an idea or topic you think I might be interested in you can send me an email at p(style="font-weight: bold;") learnprogramming413@gmail.com p a.btn.btn-primary(href='../../components/navbar/', role='button') View navbar docs » script( src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous" ) script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js" integrity="sha256-pS96pU17yq+gVu4KBQJi38VpSuKN7otMrDQprzf/DWY=" crossorigin="anonymous") script( src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha256-DiWJXXyq81WlPRnDfGmgYZj2aOVCKyEdJ1l+2TmDuAs=" crossorigin="anonymous" ) .container include includes/footer - Something you need to do in order for links to work is add the routes to the index.js file in the routes folder. My index.js routes file looks like this
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/index', function(req, res, next) { res.render('index', { title: 'Code Nerd' }); }); router.get('/aboutme', function(req, res, next) { res.render('aboutme', { title: 'About Me' }); }); router.get('/hacking', function(req, res, next) { res.render('hacking', { title: 'Hacking' }); }); router.get('/projects', function(req, res, next) { res.render('projects', { title: 'Projects!' }); }); router.get('/resume', function(req, res, next) { res.render('resume', { title: 'Resume' }); }); router.get('/contactme', function(req, res, next) { res.render('contactme', { title: 'Contact Me' }); }); module.exports = router;So from what I understand, you need to add a route for each page.
- The nav bar looks like this:
- And the main body of the home page looks like this:
- As you can see I’m using the bootstrap card objects to cleanly display some of my top posts on the home page. This is the code for the top full-width card:
.container .card(class="mb-3") .card-img-top img(src="img/trippy-2.jpg", alt="trippy", class="card-img-top", style="height: 150px") .card-body .card-title Generative Machine Learning Pt. 2 .card-text Follow my journey learning how to implement Google Deep Dream to create some crazy looking pictures. .card-text a.btn.btn-primary(href='/index', role='button') View Post - And this is the code for the two cards underneath:
.container .row .col-sm-6 .card(class="mb-3") .card-img-top img(src="img/bashed.png", alt="bashed", class="card-img-top", style="height: 200px") .card-title Hackthebox Bashed Writeup .card-text Check out my first HTB writeup! I'm not great at hacking but it's super cool and I want to learn. .card-text br a.btn.btn-primary(href='/index', role='button') View Post br .col-sm-6 .card(class="mb-3") .card-img-top img(src="img/kalieee.jpeg", alt="kali", class="card-img-top", style="height: 200px") .card-title Kali Linux on a Raspberry Pi .card-text Today I installed Kali Linux on my raspberry pi, then monitored bluetooth traffic! Check it out! .card-text br a.btn.btn-primary(href='/index', role='button') View Post br - The last thing I did for my blog was host it so it can be accessed from the web. At first I tried using an Amazon service but had issues with the build config. I switched to Heroku and it deployed right away. You just need to create an account, then click “Add App” and connect it to your github account. You then select the repository you created for this JS app and click “continuous deployment”. It will take a few minutes to build the first time but once your done you will have a live website!
Thanks for reading about my first attempt at making a website with JavaScript. It was definitely a learning experience.
-Kyle
