A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 39KB

4 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>After 5 years and $3M, here's everything we've learned from building Ghost (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://blog.ghost.org/5/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. After 5 years and $3M, here's everything we've learned from building Ghost (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://blog.ghost.org/5/">Source originale du contenu</a></h3>
  445. <p>Last week marked the fifth anniversary since the Ghost Kickstarter campaign which started it all.</p>
  446. <p>It's always fun to use these milestones to take a step back and reflect on the journey so far. On previous birthdays I've talked about revenue milestones and product updates, but this year I'm going to focus more on all the things we've learned since we started.</p>
  447. <p>Just for context though, here's a quick overview of where we are today:</p>
  448. <p><hr/>
  449. <ul>
  450. <li><strong>MRR:</strong> $82,000</li>
  451. <li><strong>Annual Net Revenue:</strong> $1.2million</li>
  452. <li><strong>All-time Revenue:</strong> $3million</li>
  453. <li><strong>Github Stars:</strong> 25,000</li>
  454. <li><strong>Releases:</strong> 173</li>
  455. <li><strong>Sites using Ghost:</strong> 512,000</li>
  456. <li><strong>Biggest users:</strong> Apple, Tinder, DuckDuckGo, Mozilla, OpenAI, OkCupid, Square, Vevo, DigitalOcean, Napster, CloudFlare and <a href="https://ghost.org/customers/">many, many more</a>.</li>
  457. <li><strong>Runway:</strong> Just kidding, we've been profitable since year 1</li>
  458. </ul>
  459. <hr/>
  460. <p>We started working on Ghost because we wanted to build a great open source publishing platform which would empower independent creators, but we also started this company as a social experiment. We wanted to know: What would it look like if you built a technology startup which could <em>not</em> make anyone rich. If you eliminated all the promises of wealth from the roadmap up front, and tried to build a <em>good</em> company, how would that affect the product, business, customers, and every little decision in between?</p>
  461. <p>We wanted to find out. So we set out to build the company we wish we could do business with, as well as the organisation we wished we could work for. Ghost was set up from day 1 as a non-profit foundation, and released all of its code under the open source MIT license.</p>
  462. <p>To this day, 90% of people who hear this still have the same reaction: "What??" followed closely by "Why??" — so it might be worth recapping briefly:</p>
  463. <hr/>
  464. <p>Being a non-profit means that the company has no shares. I don't own it. Hannah doesn't own it. Nobody owns it - it's an independent entity. The company makes money and pays expenses, salaries and taxes as normal - but there's no way for it to be bought or sold either in part (investment) or as a whole (aquisition). Any profit the company makes can only ever be reinvested, not distributed. We can't cash out. Ever. Also the entire product is open source and has no copyright. Anyone can do whatever they want with our code, for free.</p>
  465. <p>So, when we do anything you can be absolutely certain it's in the sole interest of building the best product we can for the right reasons. We want to build great open software to support sustainable journalism, publishing and a more open web. There is no other reason we have for doing anything.</p>
  466. <p>Anyone can say they want to "change the world" and that "it's not about the money" — but talk is cheap — so we made our mission legally binding. At a time when the world sometimes seems totally devoid of integrity, we really just wanted to create something with unquestionable integrity.</p>
  467. <p>Also — Being paid to work on Ghost is, to me, the equivalent of being paid to play videogames. Or go scuba diving. Or play with kittens or something.</p>
  468. <p>It turns out that a funny thing happens when you build a company you can never sell: You end up building a company you would never <em>want</em> to sell.</p>
  469. <hr/>
  470. <p>While the first few years were pretty frantic to get everything off the ground and make the business sustainable - about a year ago we actually stopped tracking revenue as a primary goal. It's now a health metric, like uptime or performance. We keep an eye on it, of course, but for the most part it doesn't drive decision making. Decision making is centred around where we think we can have an impact, what people are asking for, and what we enjoy doing.</p>
  471. <p>What we've created is a business and a product in a structure which we can see ourselves working on indefinitely. There are no investors putting pressure on us to generate a return, pump up numbers for an IPO, or work on features which would make us more attractive for an acquisition.</p>
  472. <p>We're just a small team working on something we care deeply about. Thanks to all this unapologetic focus, we don't need to try to be the biggest. Instead, we can focus on being the best.</p>
  473. <p><img src="https://blog.ghost.org/content/images/2018/05/stats-1.jpg" alt="stats-1"/></p>
  474. <h2 id="sowhatlessonshavewelearnedinthelast5years">So what lessons have we learned in the last 5 years?</h2>
  475. <p>Profit or non, building a business is hard. Doing open source is hard. Making a product which people actually care about is hard. And let me tell you, hosting websites is exceptionally hard.</p>
  476. <p>There are far too many lessons to share in a single post, but I'd like to share a handful of the most significant things we've learned from 5 years of building a popular open source product, profitable SaaS business, major hosting platform, productive remote team, and large community.</p>
  477. <h2 id="centralisedwinsonsimplicityopensourcewinsonflexibility">Centralised wins on simplicity, Open source wins on flexibility</h2>
  478. <p>This is the really big one.</p>
  479. <p>When we started out, we tried to make everything as simple and user-focused as possible. Our intent was to make the app as easy to use as any closed source platform, but with the added bonus of actually being open source with a socially positive business model.</p>
  480. <p>Most open source software has terrible UI design, so we would have great UI design and it would be the best of both worlds!</p>
  481. <p>This falls apart almost immediately. For example: if you build a centralised service - you can solve authentication, search and image optimisation pretty easily with OAuth, Algolia and imgix. It costs you minimal engineering time and a few dollars to set up so your users have a wonderful experience with absolutely no overhead.</p>
  482. <p>Try to build the same thing as a decentralised product and every one of your users has to set up their own Twitter developer apps, Algolia API keys and imgix accounts + configurations. Each service has to be set up, connected and paid for. A significantly high level of technical expertise is required to even get it all slightly working. The average non-technical user doesn't have a single hope in hell of getting it working let alone having a good experience.</p>
  483. <p>We spent several years trying to engineer our way out of this in increasingly complex ways, so that people could set up a publication on Ghost with the same level of ease as they do on Medium. In part, because that's what people were demanding. We never even got close. It's just not how modern web technology works.</p>
  484. <p>Decentralised platforms fundamentally cannot compete on ease of setup. Nothing beats the UX of signing up for a centralised application.</p>
  485. <h5 id="but">But</h5>
  486. <p>Centralised platforms fundamentally cannot compete on power and flexibility. In the long run, nothing beats owning your technology and controlling your destiny.</p>
  487. <p>Yes, setting up a Squarespace site or a Medium blog is easy. You can get the basics up and running in a matter of minutes. However, you are also explicitly limited to what those platforms allow you to do. The second you want to step outside the confines of their design, or functionality, or do anything outside the little box which they let you play in: You're stuck.</p>
  488. <p>Also, they can and <em>will</em> <a href="http://www.niemanlab.org/2018/05/medium-abruptly-cancels-the-membership-programs-of-its-21-remaining-publisher-partners/">pull the fucking plug on you at a moment's notice</a>.</p>
  489. <p>We spent a very long time trying to compete on convenience and simplicity. This was our biggest mistake and the hardest lesson to learn - because user feedback told us that this was what was most important. We deliberately limited flexibility in the product to try and make it more simple. But it ended up being still not simple enough for the average user, and not powerful or flexible enough for the professional user — the worst of both worlds.</p>
  490. <p>So the biggest takeaway after 5 years is that we have been moving, and will continue to move up market, toward professional users who value power and flexibility over ease of signup. This is where we can win compared to the competition. This is where Ghost comes into its own.</p>
  491. <p>We're really, really excited about the future of Ghost as a product.</p>
  492. <h2 id="ourbiggestmarketingwinsandlosses">Our biggest marketing wins and losses</h2>
  493. <p>The best marketing we've done has been to launch, over and over again. At least twice a year we try to make something big and launch it publicly. Sounds really obvious but most people don't do it. Beyond that we focused purely on having a good website (insane that this is a differentiator in 2018, but welcome to open source), a reliable product, great support, and a lot of care.</p>
  494. <p>Our biggest marketing failure has been our documentation and resources. They exist. They're just not very good. We're actually <a href="https://blog.ghost.org/developer-marketing/">hiring right now</a> for someone to help us fix this and make using Ghost a really fantastic developer experience.</p>
  495. <p>Another thing that has worked really well for us is to invite a small group of people to have early access to things months ahead of launching them. For instance: We're currently looking at testing an affiliate program whereby we'll pay out a 30% commission every single month on the lifetime revenue of anyone referred to Ghost(Pro). We're currently looking for just 3 people to beta test who have a large/relevant audience. <a class="typeform-share link" href="https://ghostjournalism.typeform.com/to/KJ92XR" data-mode="popup" data-hide-headers="true" data-hide-footer="true" target="_blank">Interested?</a></p></p>
  496. <h2 id="buildingadistributedteamisbotheasierandharderthanyoumightimagine">Building a distributed team is both easier and harder than you might imagine</h2>
  497. <p>Our team is spread all over the world, and we have no office in any country. After 5 years I would summarise the overall experience as very positive. The stuff you might imagine is hard generally turns out to be a non-issue, like: How do you know if people are working? How does anything get done? How do you pay people if they live in different countries? What about contracts? — The things people ask about most often all have straightforward answers. In summary: You hire people you can trust, you trust them, and the logistics in between are solved mostly with Slack, Zoom and Github.</p>
  498. <p>The stuff which is actually hard, nobody ever asks about. For instance: How do you know when someone is in a bad mood? How do you deal with loneliness? How do you foster camaraderie? How do you achieve urgency? How do you ever get to know people outside of work when you never spend time with them outside of work?</p>
  499. <p>Real challenges of being remote are more human, than business.</p>
  500. <p><img src="https://blog.ghost.org/content/images/2018/05/gh--1-.jpg" alt="gh--1-"/></p>
  501. <h2 id="opensourcedevelopmentislargelymorebrokenthanever">Open source development is largely more broken than ever</h2>
  502. <p>The least fun part of working on Ghost is dealing with Github, which is really sad.</p>
  503. <p>Everyone has their pet issue, whether design or accessibility or security or internationalisation or performance or SEO or or or... the list goes on. Everyone thinks theirs is most important and that we should work on right <em>now</em> and they can't <em>believe</em> that we would ignore it. It's always absolutely <em>outrageous</em>.</p>
  504. <p>How open source works is: If you want something, <strong>you</strong> can build it.</p>
  505. <p>That's the freedom which open source gives you. We build a base product which you can adapt, extend or integrate however you want. You can't do that with closed source platforms. Open source code = the freedom for <em>you</em> to do things with it. But that's not how many people understand it.</p>
  506. <p>Developers regularly show up on Github, rage at us for something like not supporting Postgres - and then we say "ok so are you going to write and maintain Postgres support for Ghost?" and they say "of course not, I don't have time for that!" - and then occasionally they'll go on Twitter and tell all their followers to give us hell. As if organising a mob and shouting louder is the best way to get a bunch of people writing free code to do what you want.</p>
  507. <p>Unfortunately I think Github itself has a lot to do with this. The product has become too transactional - more support tool than collaboration. And Github themselves show remarkable disinterest in the open source community as a whole - they give us beta access to test new features every so often. That's about it. There's no wider involvement at all.</p>
  508. <p>Our core team tends to do the "real work" in private issues nowadays. The signal to noise ratio is just too overwhelming.</p>
  509. <h2 id="werealwaysadaptingtothemarket">We're always adapting to the market</h2>
  510. <p>When we started out, the focus of Ghost as a product was squarely on the publishing experience. Improving the ease of publishing online seemed, in 2012 and the several years before, like something that could be much better. All of this was at a time when Svbtle was the popular new thing, and Medium didn't exist!</p>
  511. <p>Ghost has changed a lot in 5 years, but of course the market has also changed a lot beneath us. Adapting our business and our strategy to the direction of the industry as a whole is something we've gotten fairly good at. Many things which were a good idea in 2013 are no longer a good idea in 2018.</p>
  512. <p>The most exciting area we're looking at for the coming 5 years is in building and supporting new business models for publishing. Particularly around memberships, subscriptions and community. It feels like there are a lot of meaningful opportunities there which have yet to be discovered.</p>
  513. <p>Ghost is a very different company now to when it first launched, and it's hard to imagine what things might look like on our 10th anniversary.</p>
  514. <p>But we're as excited as ever about the journey :)</p>
  515. <h2 id="thereareseeminglynogoodnonprofitfundingoptionsforjournalismtech">There are seemingly no good nonprofit funding options for journalism/tech</h2>
  516. <p>One big surprise in the last 5 years has been discovering that there are really no good funding options for journalism/tech. We've bootstrapped from day 1 and always planned to be totally self-sufficient. But initially we did think that there might be grant funding or support that we might be able to benefit from. It turns out: No. Absolutely none.</p>
  517. <p>I thought between the Knight Foundation and the Mozilla Foundation and the Ford Foundation and the Google News Initiatives — there might be a path to getting a lil' help. However, they all seem to be limited to helping only projects in their own countries (mostly the US) and selecting who is awarded grants appears to be often more about who you know, than what you do.</p>
  518. <p>I'm still curious about this. Are we missing something? Are there organisations who do grant-funding who we should be talking to? Or is there a viable form of ICO which would support our company structure, to engage our own community directly, without being sketchy? Like a follow-up to the Kickstarter, maybe something like <a href="https://www.brewdog.com/equityforpunks/">Brewdog</a>.</p>
  519. <p>Would love any advice. Given that we're profitable, we don't especially need funding, but we have very large ambitions and very limited resources. We'd love to do more. Send me a note <a href="https://twitter.com/johnonolan">on Twitter</a> if you have ideas.</p>
  520. <h2 id="yourquestionsanswered">Your Questions Answered</h2>
  521. <p>Last week I mentioned on Twitter that I was writing this post and asked people what they wanted to know. There were tons of responses, so Hannah and I recorded our biggest <em>ever</em> podcast going through all the best ones!</p>
  522. <p><strong>Know someone who would be interested? Share this:</strong></p>
  523. <blockquote>
  524. <p>After 5 years, $3Million, and no investors: Here's everything we've learned from building the #1 CMS on Github 🔥 <a href="https://blog.ghost.org/5/">https://blog.ghost.org/5/</a></p>
  525. </blockquote>
  526. <p>or enjoy these 1-click links for <em>Ultimate Efficiency</em> <sup>TM</sup>: <a class="share-twitter" href="https://twitter.com/share?text=After 5 years, $3Million, and no investors: Here's everything we've learned from building the #1 CMS on Github 🔥&amp;url=https://blog.ghost.org/5/">Tweet this</a> or <a class="share-buffer" href="https://bufferapp.com/add/?url=https://blog.ghost.org/5/&amp;text=After 5 years, $3Million, and no investors: Here's everything we've learned from building the #1 CMS on Github 🔥">Buffer it</a></p>
  527. <h2 id="thankyou">Thank You</h2>
  528. <p>To everyone who has ever been a customer, subscribed to a newsletter, backed us on Kickstarter, reported a bug, made a suggestion, opened a pull request or sent us a friendly email. We wouldn't be here without you. I should also mention our <a href="https://ghost.org/partners/">partners</a> who have been so generous with their time and resources to support Ghost. I'm not sure we ever could've made it without <a href="https://digitalocean.com">Digital Ocean</a> and <a href="https://cloudflare.com">Cloudflare</a> in particular. We are indebted to their belief in us.</p>
  529. <p>Most of all, I want to thank our team and core contributors over the years. It might be my face which you see most often on Twitter and Hannah's name most frequently on Github - but in truth all of the best bits of Ghost - the bits worth talking about, weren't made by us. They were made by the wonderful team and contributors who we have been so fortunate to work with.</p>
  530. <p>If you're interested in being a part of the journey, we're hiring for <a href="https://blog.ghost.org/javascript-developer/">full stack JavaScript developers</a> right now :)</p>
  531. <p><img src="https://blog.ghost.org/content/images/2018/05/IMG_0279.jpg" alt="IMG_0279"/></p>
  532. <p><strong>Particular Thanks To:</strong></p>
  533. <p><small>Sarah Frantz, Kevin Ansfield, Katharina Irrgang, Jason Williams, Sebastian Gierlinger, Paul Adam Davis, Austin Burdine, Matt Enlow, Fabian Becker, Aileen Nowak, David Wolfe, Matthew Harrison-Jones, Jacob Gable, Felix Rieseberg, Gabor Javorszky, Georgina Lusby, Harry Wolff, Ryan McCarvill, Robert Jackson, David Arvelo, William Dibbern, Maurice Williams, Tim Griesser, David Balderston, Ricardo Tomasi, Nazar Gargol, Jakob Gillich, Peter Szel, Christopher Giffard, Kevin P, Steve, Manuel Mitasch, jamesbloomer, John O'Mahoney, Lucas Holmquist, Ian Mitchell, Adam Howard, nicoburns, Tobias Bieniek, Michael Bradshaw, James Inman, vdemedes, Zach Schneider, JT Turner, CriticalRespawn, ericterpstra, Zach Geis, Vikas, Matthew Beale, Lukas Strassel, Joe Wegner, Jilles Soeters, Connor Tumbleson, Seth Lilly, Sebastian Gräßl, Sebastian, Rosco Kalis, Rem Zolotykh, Nicola Mustone, Mattias Cibien, Marco Otte-Witte, Kyle Nunery, Delgermurun, David Blurton, Alex Kleissner, Łukasz Kliś, surgesoft, shindakun, buddhamagnet, Vivek Kannan, Vijay Kandy, Taras Mankovski, Shashank Mehta, Patrick Garman, Michael Schmidt-Voigt, Lev Gimelfarb, Kate von, Jonathan Johnson, James Seymour-Lock, Jake Wright, Harry Hope, Gary Cao, Eugene Kulabuhov, Daniel Hanson, Dane Springmeyer, Brad Dougherty, Alan Richards, mattse, king6cong, juan-g, Xie JinBin, Tony Gaskell, StevenMcD, Sean Hellwig, Sam Saccone, Patrick Kim, Pascal Borreli, Matt DuVall, Leonard Camacho, Kowsheek Mahmood, Katie Fenn, Johan Stenehall, Jason Sturges, Hey24sheep, Benjamin Chodoroff, Andrew Chilton, 汪磊, zinyando, sjama, remixz, redwallhp, quangtt, nicksahler, lennerd, jomahoney, joeldrapper, germanrcuriel, fabfou, b1nd, andy matthews, abe33, Will Glynn, Vikhyat Korrapati, Vikas Potluri, Victor Szeto, Thomas Faurbye, Talon, Szél Péter, Syaiful Bahri, Stefan Baumgartner, Seb Gotvitch, Sarah, Robert Rhoades, Richard King, Renyu Liu, Peter Dave, Mikkel Hoegh, Michael Nason, Matt Hughes, Martín González, Martin H., Martijn Swaagman, Mark Berger, Marcos Ojeda, Manuel Gellfart, Lucas Churchill, Lucas, Kirill Yakovenko, Kenneth Ashley, Karolis Dzeja, Karl Mikkelsen, Justin Yek, Josh Vanderwillik, Josh Kalderimis, Joerg Henning, Jeremiah Hoyet, Jeff Jewiss, Jarrod Mosen, Jamie Knight, Jaiden Mispy, Ilya Radchenko, Ihab Khattab, Harry V., Garrett Murphey, Erik Hanchett, Erik Bryn, Enrique Chavez, Devin Doolin, Declan Cook, David Robson, Cameron Viner, Brian Tedder, Brandon Hops, BlueHatbRit, Ben Gladwell, Ashish Dixit, Artyom Fedenko, Andy, Andrej Mlinarević, AileenCGN, Aia Patag, Adam Hess, Abijeet Patro, 1Pete, “kirrg001”, zhenkyle, zethraeus, vitalie maldur, tamura shingo, starcwl, sessa, sanddudu, sahand12, rmfx, rfpe, rektide, rambii, polygonix, oregami, omeid, nicovalencia, nason, moritz haarmann, meowtec, lmoe, jtw, janvt, ivan sebastian, hwdsl2, hoxoa, hiroshi kobayashi, enahs, danschumann, cristears, baogechen, balduv, ali, aimingoo, Zlatan Vasović, Yury Michurin, Yann Verry, Yanke Guo, William Golden, Wilhansen Li, WangSai, Waleed Ali, Vineet Sinha, Victor Truong, U-nico-laptopnico, U-nico-laptop\nico, Tushar Bhushan, Tom Gillett, Tim Walling, Tim Mansfield, Thai Phan, Terin Stock, Szu Yaung, Steven Cochrane, Steven B, Stephan Bönnemann, Simone D'Amico, Silvio Fernández, Sem, Sean Hussey, Sarah Frantz, Samuel Goodwin, Sam Wilskey, Ryan Seys, Ryan Powell, Roy van, Rodney Folz, Rob Graeber, Reinoud Kruithof, Rei, Rafael Corrêa, Rabbi Hossain, Polygonix, Peter deHaan, Peter Zimon, Peter Garland, Pedro Teixeira, Paul Connolley, Paul, Oliver Schneider, Nick Schonning, Nick Pfisterer, Nick Donohue, NetPuter, Naoya Kanai, Myles Braithwaite, Mo Valipour, Misha Wakerman, Mikael Brockman, Micheil Smith, Michael Auer, Matthew DuVall, Matt Florence, Matheus Azzi, Markus Siemens, Mark Stosberg, Mark Stacey, Marc Bachmann, Mante Bridts, Luke Shiels, Luke Arduini, Kumar Abhinav, Kenny Meyer, Julien Gilli, Joris Berthelot, Jorge Niedbalski, Jordan Sexton, Jono Warren, JonathanKryza, John-David Dalton, John Nguyen, John Cruikshank, Joel Rosenberg, Joel Fischer, Joe Cannatti, Jimmy Hsu, Jimmy Cai, Jesse Tane, Jesse Dijkstra, Jeff Escalante, Jay Beavers, Jason Friedrich, Jarrett Cruger, Jacques Marneweck, Jacob Kaplan-Moss, Ivan Votti, Ian Lopshire, Hugo Marisco, Hugo Jobling, Henning Sprang, Hendrik Schaeidt, Harry Walter, Harry Mills, Guillem Andreu, Grant Winney, Glen E., Gergely Nemeth, Fixer, Filippo Conti, Farhad, Fabian Miiro, Ethan Garofolo, Eric Schultz, Eric Ellingson, Emerson Keenan, Dmitry Mazuro, Derek Myers, Declan cook, Daniel Tsui, Daniel Niccoli, Dan Schnau, Damien Dormal, Clinton Ryan, Clay Diffrient, Chuck Lam, Chris Pearce, Chris Morgan, Chris Maddox, Cezary Kluczyński, Brian White, Blaine Bublitz, Ben Vibhagool, Augustus Yuan, Antuan Khanna, André Borud, Andrew Schwartzmeyer, Alex Cusack, Adrian Estrada and Aaron Kau.</small></p>
  534. </article>
  535. </section>
  536. <nav id="jumpto">
  537. <p>
  538. <a href="/david/blog/">Accueil du blog</a> |
  539. <a href="https://blog.ghost.org/5/">Source originale</a> |
  540. <a href="/david/stream/2019/">Accueil du flux</a>
  541. </p>
  542. </nav>
  543. <footer>
  544. <div>
  545. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  546. <p>
  547. Bonjour/Hi!
  548. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  549. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  550. </p>
  551. <p>
  552. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  553. </p>
  554. <p>
  555. Voici quelques articles choisis :
  556. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  557. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  558. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  559. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  560. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  561. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  562. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  563. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  564. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  565. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  566. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  567. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  568. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  569. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  570. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  571. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  572. </p>
  573. <p>
  574. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  575. </p>
  576. <p>
  577. Je ne traque pas ta navigation mais mon
  578. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  579. conserve des logs d’accès.
  580. </p>
  581. </div>
  582. </footer>
  583. <script type="text/javascript">
  584. ;(_ => {
  585. const jumper = document.getElementById('jumper')
  586. jumper.addEventListener('click', e => {
  587. e.preventDefault()
  588. const anchor = e.target.getAttribute('href')
  589. const targetEl = document.getElementById(anchor.substring(1))
  590. targetEl.scrollIntoView({behavior: 'smooth'})
  591. })
  592. })()
  593. </script>