forked from creativecommons/creativecommons.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
465 lines (368 loc) · 23.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="/static/gen/style.css">
<link rel="stylesheet" href="/static/pygments.css">
<meta property="og:site_name" content="Creative Commons" />
<meta property="og:title" content="Write a Blog Post" />
<meta property="og:description" content="We invite members of the Creative Commons community to write guest posts on our technical blog." />
<meta property="og:url" content="/community/write-a-blog-post/" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Write a Blog Post">
<meta name="twitter:description" content="We invite members of the Creative Commons community to write guest posts on our technical blog.">
<meta name="twitter:site" content="@creativecommons">
<meta name="twitter:creator" content="@creativecommons">
<meta name="monetization" content="$ilp.uphold.com/edR8erBDbRyq">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/gen/script.js"></script>
<script src="https://unpkg.com/@creativecommons/vocabulary@2020.7.2/js/vocabulary.js"></script>
<script>
const globalHeaderInstance = vocabulary.createGlobalHeader();
</script>
<title>Write a Blog Post — Creative Commons on GitHub</title>
<body>
<div class="ga-script">
<div id="ga-script"></div>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2010376-37', 'auto');
ga('send', 'pageview');
</script>
</div>
<!-- Header -->
<header class="container">
<nav class="navbar">
<div class="navbar-brand">
<a class="has-text-black" href="/">
<svg
class="logo margin-top-small"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 284 46">
<use href="#opensource"></use>
</svg>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item " href="/blog/">
Blog
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless ">
Contribute<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/contributing-code/">Contribution Guidelines</a>
<a class="navbar-item" href="/contributing-code/projects/">Project List</a>
<a class="navbar-item" href="/contributing-code/issue-finder/">Issue Finder</a>
<a class="navbar-item" href="/contributing-code/pr-guidelines/">Pull Request Guidelines</a>
<a class="navbar-item" href="/contributing-code/github-repo-guidelines/">GitHub Repo Guidelines</a>
<a class="navbar-item" href="/contributing-code/repo-labels/">Repository Labels</a>
<a class="navbar-item" href="/contributing-code/usability/">Usability</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless is-active">
Community<i class="icon caret-down"></i></a>
<div class="navbar-dropdown is-active">
<a class="navbar-item" href="/community/">Join the Community</a>
<a class="navbar-item" href="/community/community-team/">Community Team</a>
<a class="navbar-item" href="/community/community-team/members/">Community Team Members</a>
<a class="navbar-item" href="/community/community-team/project-roles/">Project Roles</a>
<a class="navbar-item" href="/community/community-team/community-building-roles/">Community Building Roles</a>
<a class="navbar-item" href="/community/write-a-blog-post/">Write a Blog Post</a>
<a class="navbar-item" href="/community/code-of-conduct/">Code of Conduct</a>
<a class="navbar-item" href="/community/code-of-conduct/enforcement/">Code of Conduct Enforcement</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless ">
Internships<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/internships/">Overview</a>
<a class="navbar-item" href="/internships/project-ideas/">Project Ideas</a>
<a class="navbar-item" href="/internships/applicant-guide/">Applicant Guide</a>
<a class="navbar-item" href="/internships/intern-guide/">Intern Guide</a>
<a class="navbar-item" href="/internships/mentor-guide/">Mentor Guide</a>
<a class="navbar-item" href="/internships/history/">History</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless ">
CC Search<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/cc-search/">Overview & Roadmap</a>
<a class="navbar-item" href="/cc-search/contribution-guide/">Contribution Guide</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Breadcrumb -->
<div class="breadcrumb-container">
<nav class="container breadcrumb caption bold" aria-label="breadcrumbs">
<ul>
<!-- Extracting the slugs of URL -->
<!-- Active link -->
<!-- Forming the URL using extracted slugs -->
<li><a class="link" href="/">
Home
</a></li>
<!-- Active link -->
<!-- Forming the URL using extracted slugs -->
<li><a class="link" href="/community/">
Community
</a></li>
<!-- Active link -->
<li class="is-active"><a aria-current="page displayed">Write a Blog Post</a></li>
</ul>
</nav>
</div>
<!-- Body -->
<div class="code-guidelines">
<header class="header">
<div class="container is-paddingless">
<h1>Write a Blog Post</h1>
<div class="description column is-9 is-paddingless">
<p>We invite members of the Creative Commons community to write guest posts on <a href="/blog">our technical blog</a>.</p>
</div>
</div>
</header>
<div class="container code-guidelines-body">
<div class="columns">
<div class="column is-one-quarter">
<div class="row">
<aside class="menu sidebar-menu">
<ul class="menu-list">
<li>
<a class=" link" href="/community/">Join the Community</a>
</li>
<hr class="divider">
<li>
<a class=" link" href="/community/community-team/">Community Team</a>
<ul>
<li><a class=" link" href="/community/community-team/members/"><i class="icon circle-filled"></i>Community Team Members</a></li>
<li><a class=" link" href="/community/community-team/project-roles/"><i class="icon circle-filled"></i>Project Roles</a></li>
<li><a class=" link" href="/community/community-team/community-building-roles/"><i class="icon circle-filled"></i>Community Building Roles</a></li>
</ul>
</li>
<hr class="divider">
<li>
<a class=" is-active link" href="/community/write-a-blog-post/">Write a Blog Post</a>
</li>
<hr class="divider">
<li>
<a class=" link" href="/community/code-of-conduct/">Code of Conduct</a>
<ul>
<li><a class=" link" href="/community/code-of-conduct/enforcement/"><i class="icon circle-filled"></i>Code of Conduct Enforcement</a></li>
</ul>
</li>
</ul>
</aside>
</div>
<div class="row padding-bottom-normal sticky-top">
<h4 class="b-header">On this page</h4>
<aside class="menu table-of-contents">
<ul class="menu-list">
<li>
<a class="link" href="#what-to-write-about">What to write about</a>
</li>
<li>
<a class="link" href="#writing-tips">Writing tips</a>
</li>
<li>
<a class="link" href="#how-to-post">How to post</a>
</li>
</ul>
</aside>
</div>
</div>
<div class="column content">
<h2 id="what-to-write-about">What to write about</h2><p>You can write about anything that generally intersects with CC and technology. Some examples:</p>
<ul>
<li>a new CC or copyright related tool you've built</li>
<li>your use of CC's official tools or services</li>
<li>a contribution you've made to a CC project</li>
<li>ideas or analysis of CC related technology projects</li>
<li>guides to best practices of working with technologies in the context of a CC-related project</li>
<li><em>your idea here</em></li>
</ul>
<p>It is a good idea to float what you're going to write about <a href="/community/">with the CC tech team</a> ahead of time so that we can give you feedback before you put in the work of writing it.</p>
<h2 id="writing-tips">Writing tips</h2><p><strong>Structuring posts about your project</strong><br>
If you're writing about a project you're working on, here are a few ways you could structure your post:</p>
<ul>
<li>Talk about the process of building it from when you first started and what decisions you had to make (examples: <a href="https://www.kalzumeus.com/2015/08/20/designing-and-building-stockfighter-our-programming-game/">post 1</a>, <a href="https://medium.com/women-make/building-a-web-based-motion-graphics-editor-bd070f8db795">post 2</a>)</li>
<li>Talk about the technical decisions you made and challenges you faced (examples: <a href="https://hackernoon.com/how-i-built-my-own-mailchimp-app-with-aws-ses-and-mjml-%EF%B8%8F-5e180432cc33">post 1</a>, <a href="https://www.freecodecamp.org/news/how-i-built-a-react-game-with-react-dnd-and-react-flip-move-26300156a825/">post 2</a>)</li>
<li>Announce your project and ask for contributions (example: <a href="https://creativecommons.github.io/blog/entries/cc-vocabulary-new-design-system/">CC Vocabulary announcement</a>)</li>
<li>Write an overview of how your project works without as much narrative (example: <a href="https://creativecommons.github.io/blog/entries/cc-catalog-leverage-open-data-1/">this post about the CC Catalog</a>)</li>
</ul>
<p class="text-muted"><em>If you have more tips, <a href="https://github.com/creativecommons/creativecommons.github.io-source/blob/master/content/community/write-a-blog-post/contents.lr">submit an edit to this page</a>.</em></p><h2 id="how-to-post">How to post</h2><p>Once you have written your post, you can either send it to us (Markdown is easiest for us, but we're happy to work with other formats) or directly create a pull request for your post as detailed below.</p>
<p><a href="/contributing-code/pr-guidelines/">Pull requests</a> should be submitted to the <strong><a href="https://github.com/creativecommons/creativecommons.github.io-source">creativecommons.github.io-source</a> repository</strong>. The CC Open Source site is built using the static site generator <a href="https://www.getlektor.com/">Lektor</a> and your blog post must follow the specific format documented below to appear correctly on the site. For example, please see <a href="https://github.com/creativecommons/creativecommons.github.io-source/commit/eac3fbc23b7cadb58fe49d3af3286e4c8bf20d2f">this commit adding a post</a>.</p>
<ol>
<li>Each blog entry lives in its own subdirectory of the <a href="https://github.com/creativecommons/creativecommons.github.io-source/tree/master/content/blog/entries">content/blog/entries</a> folder. Create a new subdirectory with a <a href="https://blog.tersmitten.nl/slugify/">slugified</a> version of your blog post title.</li>
<li>Create a file named <code>contents.lr</code> in the subdirectory you just created. This is the file that will contain your blog post content.</li>
<li>If your post uses images or other files, put them in the same subdirectory as the <code>contents.lr</code> file.</li>
<li><p>Fill in <code>contents.lr</code> in the following format (<a href="https://raw.githubusercontent.com/creativecommons/creativecommons.github.io-source/master/content/blog/entries/open-development-with-saltstack/contents.lr">see example post</a>):</p>
<pre>
<code>
title: Replace this text with the title of your blog post
---
categories:
Replace this text with category names as shown below. Each category name should be on its own line and the name should not contain spaces.
example-category-name-1
example-category-name-2
---
author: Replace this text with author's GitHub username. There should be no spaces in the name.
---
pub_date: Replace this text with the publication date in YYYY-MM-DD format.
---
body:
Replace this text with your post's content (minus the title). This field accepts Markdown for formatting.
If you're including images, you can use the Markdown image syntax i.e. .
You don't need to specify the path to the image since you have uploaded it to the same folder in Step 3.
</code>
</pre><p><em>Read more about <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown formatting here</a>.</em></p>
</li>
<li>Create category pages for any new categories that you've assigned to your post. Each category has its own subdirectory in the <a href="https://github.com/creativecommons/creativecommons.github.io-source/tree/master/content/blog/categories">content/blog/categories</a> directory.<ul>
<li>Create a folder that uses the <strong>the exact category name</strong> as the blog post with its own <code>contents.lr</code> file within.</li>
<li>The new <code>contents.lr</code> file within should follow the same format as the other categories. Here's an <a href="https://raw.githubusercontent.com/creativecommons/creativecommons.github.io-source/master/content/blog/categories/gsoc-2019/contents.lr">example category content file</a>.</li>
</ul>
</li>
<li>Similarly, if this is your first post, you'll need to create a file with author information. Each author has a subdirectory in the <a href="https://github.com/creativecommons/creativecommons.github.io-source/tree/master/content/blog/authors">content/blog/authors</a> directory.<ul>
<li>Your author folder must have <strong>the exact username</strong> as the author field of the blog post and have a <code>contents.lr</code> file within.</li>
<li>The <code>username</code> field in the <code>contents.lr</code> file should also use the same exact username.</li>
<li>The author's <code>contents.lr</code> file within should follow the same format as the other authors. Here's an <a href="https://raw.githubusercontent.com/creativecommons/creativecommons.github.io-source/master/content/blog/authors/TimidRobot/contents.lr">example author content file</a>.</li>
</ul>
</li>
<li>If your blog is part of a connected series, you'll need to make a file with series information. Each series has a subdirectory in the <a href="https://github.com/creativecommons/creativecommons.github.io-source/tree/master/content/blog/series">content/blog/series</a> directory.<ul>
<li>Create a folder that uses the <strong>the exact series name</strong> as the blog post with its own <code>contents.lr</code> file within.</li>
<li>The new <code>contents.lr</code> file within should follow the same format as the other series. Here's an <a href="https://raw.githubusercontent.com/creativecommons/creativecommons.github.io-source/master/content/blog/series/gsoc-2019-vocabulary/contents.lr">example series content file</a>.</li>
</ul>
</li>
<li>Build the <code>creativecommons.github.io-source</code> project locally (instructions are in the <code>README</code> in the repository) and ensure your blog post shows up correctly locally. If you have not created the appropriate category or author files, you will see a build error in this step.</li>
<li>Push your code and make a pull request.</li>
<li>Wait for a member of CC's fulltime staff to merge the post into the <code>master</code> branch.</li>
</ol>
<p>Once merged, your new post will automatically be pushed to the production site and a notification containing your post URL will be sent to the <code>#cc-developers</code> channel on Slack.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="main-footer">
<div class="container">
<div class="columns">
<div class="column is-one-quarter">
<a href="https://creativecommons.org" class="main-logo margin-bottom-bigger">
<span class="has-text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 304 73">
<use href="#logomark"></use>
</svg>
</span>
</a>
<div>
<address class="margin-bottom-normal">Creative Commons<br />PO Box 1866, Mountain View CA 94042</address>
<a href="mailto:info@creativecommons.org" class="mail">info@creativecommons.org</a><br />
<a href="tel://+1-415-429-6753" class="phone">+1-415-429-6753</a>
</div>
<div class="margin-vertical-large">
<a href="https://www.instagram.com/creativecommons" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">instagram</i>
</a>
<a href="https://www.twitter.com/creativecommons" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">twitter</i>
</a>
<a href="https://www.facebook.com/creativecommons" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">facebook</i>
</a>
<a href="https://www.linkedin.com/company/creative-commons/" class="social has-text-white" target="_blank"
rel="noopener">
<i class="icon margin-right-small is-size-4">linkedin</i>
</a>
</div>
</div>
<div class="column is-three-quarters">
<div class="columns">
<div class="column is-full">
<nav class="footer-navigation">
<ul class="menu">
<li>
<a href="/blog/" class="menu-item">Blog</a>
</li>
<li>
<a href="/community/community-team/" class="menu-item">Community Team</a>
</li>
<li>
<a href="/contributing-code/projects/" class="menu-item">Project List</a>
</li>
<li>
<a href="/archives/" class="menu-item">Archives</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<div class="subscription">
<h5 class="b-header">Subscribe to our newsletter</h5>
<form class="newsletter">
<input type="text" class="input" placeholder="Your email">
<input type="submit" value="subscribe" class="button small">
</form>
</div>
<div class="attribution margin-top-bigger">
<p class="caption">
Except where otherwise
<a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">noted</a>,
content on this site is licensed under a
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons
Attribution 4.0 International license</a>.
<a href="https://creativecommons.org/website-icons" target="_blank" rel="noopener">Icons</a>
by
<a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome</a>.
</p>
<div class="margin-top-smaller">
<i class="icon margin-right-small is-size-4">cclogo</i>
<i class="icon margin-right-small is-size-4">ccby</i>
</div>
</div>
</div>
<div class="column is-one-third">
<aside class="donate-section">
<h5>Our work relies on you!</h5>
<p>Help us keep the internet free and open.</p>
<a class="button small donate" href="http://creativecommons.org/donate">
<i class="icon cc-letterheart-filled margin-right-small is-size-5 padding-top-smaller"></i>
Donate now
</a>
</aside>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>