mirror of
https://github.com/mgerb/mywebsite
synced 2026-01-11 18:32:50 +00:00
Added blog
This commit is contained in:
60
views/blogposts/7-21-15.jade
Normal file
60
views/blogposts/7-21-15.jade
Normal file
@@ -0,0 +1,60 @@
|
||||
div.blog-post
|
||||
h2.blog-post-title First Blog Post
|
||||
p.blog-post-meta July 21st 2015 by Mitchell
|
||||
p.
|
||||
My first blog post introduces this website and the motives behind it.
|
||||
I discuss setting up a Node.js webserver for the first time and
|
||||
my experiences with it thus far.
|
||||
hr
|
||||
p.
|
||||
I have had this site up for awhile now, but I've decided to turn it
|
||||
into a blog style website, more or less. I first started working on the site
|
||||
because I wanted to learn new web development tools, in this case, Node.js and MongoDB.
|
||||
p.
|
||||
I already had previous experience with SQL databases and other server side scripting
|
||||
languages such as PHP and JSP, but I heard good things about Node.js and I wanted to
|
||||
familiarize myself with a NoSQL database. At first, Node.js was a bit confusing to work
|
||||
with and figure everything out. Now that I am starting to get the hang of Node and MongoDB
|
||||
I am enjoying them more and more.
|
||||
|
||||
h2 Setting up Node.js for the first time
|
||||
p.
|
||||
There are multiple ways to get up and running with Node. Node uses "modules" and has some
|
||||
that are already built in. Others need to be installed with the NPM package manager, which
|
||||
will become your friend. I am going focus on installing Node.js with Express, which is a
|
||||
web framework for Node.js.
|
||||
code$ sudo apt-get install nodejs
|
||||
br
|
||||
code$ sudo apt-get install npm
|
||||
br
|
||||
p.
|
||||
Once you have both Node.js and NPM installed, install Express and MongoDB.
|
||||
We are going to install and use express generator to easily create a skeleton that we can
|
||||
work from.
|
||||
code$ npm install express-generator -g
|
||||
br
|
||||
p
|
||||
|Based on your system, installing MongoDB may be a bit different.
|
||||
a(href="http://docs.mongodb.org/manual/") Here is a guide on how to install.
|
||||
p Once express generator is installed, it is extremely simple to set up a new Node application.
|
||||
code$ express myapp
|
||||
br
|
||||
p This will generate a new fold "myapp" with prebuild folders and files.
|
||||
code$ cd myapp
|
||||
br
|
||||
code$ npm install
|
||||
br
|
||||
code$ npm start
|
||||
p.
|
||||
Now as easy as that sounds, you have a Node web application running on your machine.
|
||||
You can navigate to your web app at localhost:3000 (It's configured to use port 3000 by default)
|
||||
p
|
||||
|Express organizes everything nicely in the
|
||||
a(href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller") Model View Controller
|
||||
|software pattern. Folders are split up into views, routes, and public files.
|
||||
|If you are implementing a database, you would also create a "models" folder.
|
||||
|There is also a folder which contains Node modules.
|
||||
|When you use NPM to install new modules this is where they will be located.
|
||||
p.
|
||||
Node is a very powerful tool that I plan on exploring more in the future.
|
||||
As development of this site continues, I plan to submit more content similar to this.
|
||||
130
views/index.jade
130
views/index.jade
@@ -3,52 +3,88 @@ extends layout
|
||||
block content
|
||||
div.header
|
||||
div.centerDiv
|
||||
h1.headerText.textCenter mitchellG.me
|
||||
|
||||
nav.blog-nav
|
||||
div.container
|
||||
h1.textCenter Enter Reminder
|
||||
form(action="/", method="post")
|
||||
div.form-signin
|
||||
Span Phone Number:
|
||||
if (number != null)
|
||||
Span.colorRed= " " + number
|
||||
br
|
||||
input.form-control(required type="text", name="number", placeholder="555-555-5555")
|
||||
br
|
||||
Span Carrier:
|
||||
select.form-control(name="carrier")
|
||||
option(value="@vtext.com") Verizon
|
||||
option(value="@txt.att.net") AT&T
|
||||
option(value="@tmomail.net") T-Mobile
|
||||
option(value="@messaging.sprintpcs.com ") Sprint
|
||||
option(value="@vmobl.com") Virgin Mobile
|
||||
option(value="@mmst5.tracfone.com") Tracfone
|
||||
option(value="@mymetropcs.com") Metro PCS
|
||||
option(value="@myboostmobile.com") Boost Mobile
|
||||
option(value="@sms.mycricket.com") Cricket
|
||||
option(value="@messaging.nextel.com") Nextel
|
||||
option(value="@message.alltel.com") Alltel
|
||||
option(value="@ptel.com") Ptel
|
||||
option(value="@tms.suncom.com") Suncom
|
||||
option(value="@qwestmp.com") Quest
|
||||
option(value="@email.uscc.net") U.S. Cellular
|
||||
br
|
||||
Span Date:
|
||||
if (date != null)
|
||||
Span.colorRed= " " + date
|
||||
br
|
||||
input.form-control(required type="text", name="date", id="datepicker" placeholder="MM/DD/YYYY")
|
||||
br
|
||||
Span Time:
|
||||
if (time != null)
|
||||
Span.colorRed= " " + time
|
||||
br
|
||||
input.form-control(required type="text", name="time", id="timepicker" placeholder="12:00am")
|
||||
br
|
||||
Span Message:
|
||||
textarea.form-control(required type="textarea", name="message", placeholder="Type your message here...")
|
||||
br
|
||||
input(hidden type="text" name="timeZone" id="timeZone")
|
||||
input(type="submit", value="Remind Me", id="submitButton").btn.btn-lg.btn-primary.btn-block
|
||||
|
||||
div.blog-header
|
||||
h1.blog-title mitchellG.me
|
||||
p.lead.blog-description A "blog" about computer related projects that I find interesting.
|
||||
div.row
|
||||
div.col-lg-8.blog-main
|
||||
include ./blogposts/7-21-15.jade
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
div.col-sm-4.blog-sidebar
|
||||
h1.textCenter About Me
|
||||
img.aboutMeImage.center.img-rounded(src="images/aboutme.jpg")
|
||||
br
|
||||
div.sidebar-module.sidebar-module-inset
|
||||
p.
|
||||
I'm 22 years old and I'm currently attending Winona State University as a Computer Science major.
|
||||
I am graduating in Spring of 2016 and plan to pursue a career in the field of software development.
|
||||
a(href="https://www.linkedin.com/pub/mitchell-gerber/b3/391/125" target="_blank")
|
||||
i.icon-large.icon-linked-in
|
||||
div.sidebar-module
|
||||
h3.textCenter Enter Reminder
|
||||
form(action="/", method="post")
|
||||
div.form-signin
|
||||
Span Phone Number:
|
||||
if (number != null)
|
||||
Span.colorRed= " " + number
|
||||
br
|
||||
input.form-control(required type="text", name="number", placeholder="555-555-5555")
|
||||
br
|
||||
Span Carrier:
|
||||
select.form-control(name="carrier")
|
||||
option(value="@vtext.com") Verizon
|
||||
option(value="@txt.att.net") AT&T
|
||||
option(value="@tmomail.net") T-Mobile
|
||||
option(value="@messaging.sprintpcs.com ") Sprint
|
||||
option(value="@vmobl.com") Virgin Mobile
|
||||
option(value="@mmst5.tracfone.com") Tracfone
|
||||
option(value="@mymetropcs.com") Metro PCS
|
||||
option(value="@myboostmobile.com") Boost Mobile
|
||||
option(value="@sms.mycricket.com") Cricket
|
||||
option(value="@messaging.nextel.com") Nextel
|
||||
option(value="@message.alltel.com") Alltel
|
||||
option(value="@ptel.com") Ptel
|
||||
option(value="@tms.suncom.com") Suncom
|
||||
option(value="@qwestmp.com") Quest
|
||||
option(value="@email.uscc.net") U.S. Cellular
|
||||
br
|
||||
Span Date:
|
||||
if (date != null)
|
||||
Span.colorRed= " " + date
|
||||
br
|
||||
input.form-control(required type="text", name="date", id="datepicker" placeholder="MM/DD/YYYY")
|
||||
br
|
||||
Span Time:
|
||||
if (time != null)
|
||||
Span.colorRed= " " + time
|
||||
br
|
||||
select.form-control.timeForm(name="hours")
|
||||
-for(var i = 1; i < 13; i++)
|
||||
option(value=i)= i
|
||||
select.form-control.timeForm(name="minutes")
|
||||
-for(var i = 1; i < 60; i++)
|
||||
option(value=i)= i
|
||||
select.form-control.timeForm(name="ampm")
|
||||
option(value="am") AM
|
||||
option(calue="pm") PM
|
||||
br
|
||||
br
|
||||
Span Message:
|
||||
textarea.form-control(required type="textarea", name="message", placeholder="Type your message here...")
|
||||
br
|
||||
input(hidden type="text" name="timeZone" id="timeZone")
|
||||
input(type="submit", value="Remind Me", id="submitButton").btn.btn-lg.btn-primary.btn-block
|
||||
footer.blog-footer
|
||||
p Site created and managed by Mitchell Gerber
|
||||
Span ©2015
|
||||
br
|
||||
Span Glyphicons provided by
|
||||
br
|
||||
a(href="http://glyphicons.com/" target="_blank")
|
||||
Span glyphicons.com
|
||||
@@ -6,6 +6,7 @@ html
|
||||
link(rel='stylesheet', href='/stylesheets/style.css')
|
||||
link(rel='stylesheet', href='jquery-ui-1.11.4/jquery-ui.css')
|
||||
link(rel='stylesheet', href='jquery-timepicker/jquery.timepicker.css')
|
||||
link(rel='stylesheet', href='bootstrap/css/bootstrap.icon-large.min.css')
|
||||
link(href='http://fonts.googleapis.com/css?family=Arvo', rel='stylesheet', type='text/css')
|
||||
body
|
||||
block content
|
||||
@@ -13,5 +14,4 @@ html
|
||||
script(src="bootstrap/js/bootstrap.js")
|
||||
script(src="jquery-ui-1.11.4/jquery-ui.js")
|
||||
script(src="jquery-timepicker/jquery.timepicker.js")
|
||||
script(src="javascripts/notify.min.js")
|
||||
script(src="javascripts/custom.js")
|
||||
Reference in New Issue
Block a user