Skip to content
This repository was archived by the owner on Sep 23, 2020. It is now read-only.

Commit 6d5c0cf

Browse files
biilmannbiilmann
committed
Add upcoming presentation with James Stone
1 parent cc88d87 commit 6d5c0cf

File tree

7 files changed

+212
-0
lines changed

7 files changed

+212
-0
lines changed

‎content/upcoming/james-stone.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
title: Wordpress to Middleman
3+
description: Lessons Learned, Switching from WordPress to Middleman, a Static Site Generator
4+
cover: /img/upcoming/james-stone.png
5+
presenter: James Stone
6+
presenter_title: Author & Blogger
7+
location: "Wikia"
8+
date: "2015-09-29"
9+
---
10+
11+
### Interview with Author / Blogger James Stone on coming from Wordpress to a Static Site Generator.
12+
13+
This Tuesday Sept 29th, James Stone will be giving a talk on migrating from Wordpress to Middleman at the [Static Web Tech Meetup](http://www.meetup.com/sf-static-web-tech/events/225453139/) here in San Francisco at Wikia’s headquarters. (We highly recommend going to see him. Free entrance, Free food, lot’s of static web techies, what’s not to like).
14+
15+
So we thought we’d interview him a bit about his experience with Modern Static websites. We wrote it down too, so here goes:
16+
17+
__N: Hi James, thanks for joining us.__
18+
19+
J: Thanks for having me.
20+
21+
__N: First off. Who are you?__
22+
23+
J: I’m an author, blogger, video blogger and web developer.
24+
25+
__N: Awesome. When did you start coding?__
26+
27+
J: So my mum thought it was a great idea to teach me to code. This was the 1980s. I started on an Atari XL 1600 with a tape drive for audiocassettes and I kept going through junior high school and onwards. First developer job was at a startup in Seattle where I did Java.
28+
29+
__N: When the Internet took off, where you onboard from day 1?__
30+
31+
J: I was using Gopher (alternative protocol to http), and off the bat wasn’t too impressed, thinking it was just Gopher with images… Then of course soon after it exploded and I was all onboard.
32+
33+
__N: When was your first experience with Modern Static Web Tech?__
34+
35+
J: A couple of years ago I got really interested in performance. I was hosting Wordpress sites. I started with frontend improvement, but quickly got into tweaking the hosting server, going from Apache to Nginx and such. What I found was that even with manually optimizing caching with Wordpress, there is only so much performance you can get. So I started researching using static files, as I knew from early tests that I was getting 12 times better performance over Wordpress. That was without plugins or anything.
36+
That led me to Octopress (static site generator build on top of Jekyll), which provides a very clear path for people coming from Wordpress.
37+
However I’m very involved with Zurb’s Foundation (a CSS framework) and found the structure and theming to be a little too limiting.
38+
That led me to Middleman, which was a good compromise to me as it on one hand had a pre-built blogging engine where you can just put down a lot of markdown files and Yaml, but on the other hand still gave me a lot of flexibility to build my own layouts and partials and just quickly get moving, as I already understood the front-end and where I wanted to go.
39+
40+
__N: Was getting started with Middleman hard?__
41+
42+
J: There are tutorials that make it really easy to get a basic blog up and running.
43+
The next step is building templates and that was definitely easy as well.
44+
But where I hit a strong learning curve, was when I needed to build back out the functionalities that I used and liked in Wordpress, like featured images, etc…
45+
Fortunately tools like this are constantly being developed on.
46+
47+
__N: Which was the biggest jump - Wordpress to Octopress or Octopress to Middleman.__
48+
49+
J: Octopress and Middleman are in many ways similar, so the original shift from Wordpress was where I needed to learn the most.
50+
From Wordpress to a static site generator there is a little bit of a disconnect because you no longer have a CMS.
51+
All of your articles are like this weird markdown file with Yaml on top and if you make small mistakes it will break the build sometimes, so you do have to be a bit careful.
52+
53+
__N: All right, won’t go into more detail here as that’s for Tuesdays talk!
54+
To take a step back again. What are your wishes for this new category of Modern Static Web Tech?__
55+
56+
J: From the point of view of a blogger, content creator and businessman my biggest wish is for a proper CMS. If you are a developer it’s easy to work with things as markdown and command line tools, but it’s not really super intuitive for most other people.
57+
I can teach a non-tech guy to use Wordpress in a short time, and I don’t have to be around as the gatekeeper of the technology.
58+
Without a CMS, it’s a hard sell. You can preach the amazing performance, but I often hear people say ’that’s great, but how do I update it?’
59+
So I hope for an easy way of handing things of to editors and content contributors, etc.
60+
61+
__N: What is your biggest concern for the category of Modern Static Web Tech?__
62+
63+
J: Probably whether the projects such as Middleman or Assemble.io will stay active.
64+
65+
__N: Without going in too deep, what is your favorite project made with a static site generator?__
66+
67+
J: I think if I had to pick one, I’d probably pick Discover Meteor (https://www.discovermeteor.com/) which is a book and a website by Sacha Greif. It’s really interesting to me for a couple of reasons.
68+
69+
First off, he is a designer by trade who then learned to code and got really into Meteor (javascript framework) but then chose Middleman as the tool to develop things like multilingual documentation for his book, as well as all the marketing pages for it.
70+
71+
Secondly, the site is very well designed. Often if you look at sites like Octopress sites, they are OK, but not very refined or polished design. So this site proved to me that Middleman could be used to make pixel perfect beautifully designed sites, and that static engines can be used for a lot more than just blog templates.
72+
73+
Thirdly, Sacha blogs about all the things he is doing with Middleman that are less obvious and more customized. So to me the site becomes a great tool for learning as well.
74+
75+
__N: Any parting words?__
76+
77+
J: Hopefully lots of people will come on Tuesday (Sept. 29, 7pm, Wikia HQ, San Francisco) and here me talk about going from Wordpress to a Static Site Generator. I’ll be showing code examples, and will tell about my approach that might be quite a bit different from what most people are used to.
78+
79+
__N: Thanks for taking the time to talk with us, and see you Tuesday!__
80+
81+
J: No problem, see you then!

‎layouts/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,36 @@ <h1 class="mb-xs-16 large">SF Static Web-Tech</h1>
2222
</li>
2323
</ul>
2424
</section>
25+
<section class="page-title page-title-4 bg-secondary">
26+
<div class="container">
27+
<div class="row">
28+
<div class="col-sm-12 text-center">
29+
<h2 class="uppercase mb0">Upcoming Meetups</h2>
30+
</div>
31+
</div>
32+
<!--end of row-->
33+
</div>
34+
</section>
35+
36+
{{ range $index, $element := where .Data.Pages.ByDate "Section" "upcoming"}}
37+
<section class="image-square {{ if modBool $index 2 }}left{{ else }}right{{ end }}">
38+
<div class="col-md-6 image bg-black">
39+
<a class="background-image-holder blurry" href="{{ $element.Permalink }}">
40+
<img alt="image" class="background-image" src="{{ $element.Params.cover }}" />
41+
</a>
42+
</div>
43+
<div class="col-md-6 col-md-offset-1 content">
44+
<p class="mb0">{{ dateFormat "1. 2. 2006" $element.Date }}</p>
45+
<h3 class="mt0 mb0"><a class="title-style" href="{{ $element.Permalink }}">{{ $element.Title }}</a></h3>
46+
<p class="mb48">By {{ $element.Params.presenter }}</p>
47+
<p class="mb24">
48+
{{ $element.Description }}
49+
</p>
50+
</div>
51+
<div class="stamp">Upcoming</div>
52+
</section>
53+
{{ end }}
54+
2555
<section class="page-title page-title-4 bg-secondary">
2656
<div class="container">
2757
<div class="row">

‎layouts/upcoming/single.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{{ partial "header" }}
2+
<section class="page-title page-title-4 bg-secondary">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-md-12">
6+
<h3 class="uppercase mb0">
7+
<i class="ti-microphone"></i> {{ .Title}}
8+
</h3>
9+
<p class="mb0">
10+
{{ .Params.presenter }}, {{ .Params.presenter_title}} • {{ .Params.location }}, {{ dateFormat "Monday, Jan 2, 2006" .Date }}
11+
</p>
12+
</div>
13+
</div>
14+
<!--end of row-->
15+
</div>
16+
<!--end of container-->
17+
</section>
18+
<section class="pt40 pb40">
19+
<div class="container">
20+
<div class="row">
21+
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
22+
{{ .Content }}
23+
</div>
24+
</div>
25+
<!--end of row-->
26+
</div>
27+
28+
</section>
29+
{{ partial "footer" . }}

‎static/admin.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,37 @@ <h3 class="uppercase mb0">
6363

6464
</script>
6565

66+
<script type="text/x-handlebars" data-template-name='cms/preview/upcoming'>
67+
<section class="page-title page-title-4 bg-secondary">
68+
<div class="container">
69+
<div class="row">
70+
<div class="col-md-12">
71+
<h3 class="uppercase mb0">
72+
<i class="ti-microphone"></i> {{ entry.title }}
73+
</h3>
74+
<p class="mb0">
75+
{{ entry.presenter }}, {{ entry.presenter_title}} • {{ entry.location }}, {{ time-format entry.date "LL" }}
76+
</p>
77+
</div>
78+
</div>
79+
<!--end of row-->
80+
</div>
81+
<!--end of container-->
82+
</section>
83+
<section class="pt40 pb40">
84+
<div class="container">
85+
<div class="row">
86+
<div class="col-md-12">
87+
{{ cms-preview field="body" }}
88+
</div>
89+
</div>
90+
<!--end of row-->
91+
</div>
92+
93+
</section>
94+
95+
</script>
96+
6697
<script src="//cms.netlify.com/assets/vendor.js"></script>
6798
<script src="//cms.netlify.com/assets/cms.js"></script>
6899
</body>

‎static/admin/config.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,19 @@ collections: # A list of collections the CMS should be able to edit
2424
- {label: "Body", name: "body", widget: "markdown"}
2525
meta: # Meta data fields. Just like fields, but without any preview element
2626
- {label: "Publish Date", name: "date", widget: "date"}
27+
28+
- name: "upcoming" # Used in routes, ie.: /admin/collections/:slug/edit
29+
label: "Upcoming" # Used in the UI, ie.: "New Post"
30+
folder: "content/upcoming" # The path to the folder where the documents are stored
31+
sort: "date:asc" # Default is title:asc
32+
create: true # Allow users to create new documents in this collection
33+
fields: # The fields each document in this collection have
34+
- {label: "Title", name: "title", widget: "string", tagname: "h1"}
35+
- {label: "Presenter", name: "presenter", widget: "string"}
36+
- {label: "Presenter Title (CEO/CMO/etc)", name: "presenter_title", widget: "string"}
37+
- {label: "Location (Wikia/Netlify HQ/etc)", name: "location", widget: "string"}
38+
- {label: "Description", name: "description", widget: "string", tagname: "p", class: "lead"}
39+
- {label: "Cover Image", name: "cover", widget: "image", media_folder: "static/img/upcoming"}
40+
- {label: "Body", name: "body", widget: "markdown"}
41+
meta: # Meta data fields. Just like fields, but without any preview element
42+
- {label: "Publish Date", name: "date", widget: "date"}

‎static/css/custom.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,28 @@
3333
a.title-style {
3434
color: inherit;
3535
}
36+
37+
.stamp {
38+
position: absolute;
39+
top: 50px;
40+
left: 50%;
41+
background: rgba(100,100,100,0.3);
42+
font-size: 75px;
43+
text-transform: uppercase;
44+
color: rgba(255,255,255,0.8);
45+
width: 440px;
46+
height: 90px;
47+
line-height: 90px;
48+
text-align: center;
49+
margin-left: -220px;
50+
}
51+
52+
@media (max-width: 500px) {
53+
.stamp {
54+
width: 300px;
55+
height: 60px;
56+
line-height: 60px;
57+
font-size: 50px;
58+
margin-left: -150px;
59+
}
60+
}

‎static/img/upcoming/james-stone.png‎

1.31 MB
Loading

0 commit comments

Comments
 (0)