A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Mastodon on your own domain without hosting a server (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://blog.maartenballiauw.be/post/2022/11/05/mastodon-own-donain-without-hosting-server.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Mastodon on your own domain without hosting a server</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://blog.maartenballiauw.be/post/2022/11/05/mastodon-own-donain-without-hosting-server.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Like many in the past week, I have been having a serious look at <a href="https://joinmastodon.org/">Mastodon</a> as an alternative to Twitter.</p>
  71. <p>Mastodon is a social network that is distributed across many servers that have their own smaller communities, and federate with other servers to provide a more “global” social network.</p>
  72. <p>There are <a href="https://joinmastodon.org/servers">many servers out there</a> that you can choose from. Alternatively, you can also <a href="https://docs.joinmastodon.org/admin/prerequisites/">self-host</a> your Mastodon server, or use <a href="https://joinfediverse.wiki/How_to_host_your_own_Fediverse_instance%3F">one of many hosted instances</a>, “Mastodon as a service”.</p>
  73. <p>In recent hours, I have seen many people wanting to host their own servers, which is great fun! Self-hosting also has the added benefit of being able to have a Mastodon account on your own domain, and you own your data.</p>
  74. <p>Now, I don’t really care about that (<em>yet?</em>). I ran my own mail server back in the day and am very happy with someone running it for me now. The same goes with Mastodon: I trust the folks at <a href="https://mastodon.online">Mastodon.online</a>, the server I joined, to do a much better job at this than I will ever do.</p>
  75. <p>However, there is one thing I <em>would</em> like my own server for: <strong>discoverability</strong>. Much like with e-mail, I want folks to have an easy address to find me, and one that I can keep giving out to everyone even if later I switch to a different Mastodon server. A bit like e-mail forwarding to your ISP’s e-mail service.</p>
  76. <p>The good news is: <strong>you can use your own domain</strong> and share it with other folks. It will link to your actual account.</p>
  77. <p>Go on, try it. Search for <code class="language-plaintext highlighter-rouge">@<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593438382b2d3c37193b38353530382c2e773b3c">[email protected]</a></code>, and you will find my <code class="language-plaintext highlighter-rouge">@<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395458584b4d5c575b58555550584c4e7954584a4d565d5657174a565a505855">[email protected]</a></code>.</p>
  78. <h2 id="how-to-discover-mastodon-account-via-custom-domain">How to discover Mastodon account via custom domain</h2>
  79. <p>Reading <a href="https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/">“how to implement a basic ActivityPub server”</a>, there are a couple of things that stand out:</p>
  80. <ul><li>Mastodon (and others) use <a href="https://activitypub.rocks/">ActivityPub</a> as their protocol to communicate between “actors”.</li><li>Actors are discovered using <a href="https://webfinger.net/">WebFinger</a>, a way to attach information to an email address, or other online resource.</li></ul>
  81. <p>Since discovery is what I was after, WebFinger seemed like the only thing I would need to implement.</p>
  82. <p>WebFinger lives on <code class="language-plaintext highlighter-rouge">/.well-known/webfinger</code> on a server. For Mastodon, your server will be queried for accounts using an endpoint that looks like this:</p>
  83. <p>And indeed, if I look at my Mastodon server’s <code class="language-plaintext highlighter-rouge">webfinger</code> for my account, I get a response back!</p>
  84. <div class="language-http highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">GET https://mastodon.online/.well-known/webfinger?resource=acct:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="234e42425157464d41424f4f4a425654634e4250574c474c4d0d4c4d4f4a4d46">[email protected]</a>
  85. {
  86. "subject": "acct:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf6fafae9effef5f9faf7f7f2faeeecdbf6fae8eff4fff4f5b5f4f5f7f2f5fe">[email protected]</a>",
  87. "aliases": [
  88. "https://mastodon.online/@maartenballiauw",
  89. "https://mastodon.online/users/maartenballiauw"
  90. ],
  91. "links": [
  92. {
  93. "rel": "http://webfinger.net/rel/profile-page",
  94. "type": "text/html",
  95. "href": "https://mastodon.online/@maartenballiauw"
  96. },
  97. {
  98. "rel": "self",
  99. "type": "application/activity+json",
  100. "href": "https://mastodon.online/users/maartenballiauw"
  101. },
  102. {
  103. "rel": "http://ostatus.org/schema/1.0/subscribe",
  104. "template": "https://mastodon.online/authorize_interaction?uri={uri}"
  105. }
  106. ]
  107. }
  108. </span></code></pre></div></div>
  109. <p>Sweet!</p>
  110. <p>The next thing I tried was simply copy-pasting this JSON output to my own server under <code class="language-plaintext highlighter-rouge">.well-known/webfinger</code>, and things magically started working.</p>
  111. <p>In other words, if you want to be discovered on Mastodon using your own domain, you can do so by copying the contents of <code class="language-plaintext highlighter-rouge">https://&lt;your mastodon server&gt;/.well-known/webfinger?resource=acct:&lt;your account&gt;@&lt;your mastodon server&gt;</code> to <code class="language-plaintext highlighter-rouge">https://&lt;your domain&gt;/.well-known/webfinger</code>.</p>
  112. <p>One caveat: this approach works much like a catch-all e-mail address. <code class="language-plaintext highlighter-rouge">@<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01606f787569686f6641786e7473656e6c60686f2f626e6c">[email protected]</a></code> will match, unless you add a bit more scripting to only show a result for resources you want to be discoverable.</p>
  113. <p>Discoverability, at this stage, is one of the things that matter to get a proper social graph going. Over the past days, there were a couple of tools I found very useful in finding Twitter folks on Mastodon:</p>
  114. <ul><li><a href="https://twitodon.com/">Twitodon</a> learns about which Twitter account matches a Mastodon account, from folks using this service.</li><li><a href="https://fedifinder.glitch.me/">Fedifinder</a> and <a href="https://pruvisto.org/debirdify/">Debirdify</a> scan Twitter accounts and checks if there is a Mastodon account in their profile data.</li></ul>
  115. <p>Good luck! And give <code class="language-plaintext highlighter-rouge">@<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d101c1c0f0918133d1f1c1111141c080a531f18">[email protected]</a></code> a follow if you make the jump to Mastodon.</p>
  116. <p><strong>Edit:</strong> Seems <a href="https://github.com/mastodon/mastodon/issues/2668">there is a GitHub issue which requests custom domains</a> as well.</p>
  117. </article>
  118. <hr>
  119. <footer>
  120. <p>
  121. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  123. </svg> Accueil</a> •
  124. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  126. </svg> Suivre</a> •
  127. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  129. </svg> Pro</a> •
  130. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  131. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  132. </svg> Email</a> •
  133. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  135. </svg> Légal</abbr>
  136. </p>
  137. <template id="theme-selector">
  138. <form>
  139. <fieldset>
  140. <legend><svg class="icon icon-brightness-contrast">
  141. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  142. </svg> Thème</legend>
  143. <label>
  144. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  145. </label>
  146. <label>
  147. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  148. </label>
  149. <label>
  150. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  151. </label>
  152. </fieldset>
  153. </form>
  154. </template>
  155. </footer>
  156. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  157. <script>
  158. function loadThemeForm(templateName) {
  159. const themeSelectorTemplate = document.querySelector(templateName)
  160. const form = themeSelectorTemplate.content.firstElementChild
  161. themeSelectorTemplate.replaceWith(form)
  162. form.addEventListener('change', (e) => {
  163. const chosenColorScheme = e.target.value
  164. localStorage.setItem('theme', chosenColorScheme)
  165. toggleTheme(chosenColorScheme)
  166. })
  167. const selectedTheme = localStorage.getItem('theme')
  168. if (selectedTheme && selectedTheme !== 'undefined') {
  169. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  170. }
  171. }
  172. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  173. window.addEventListener('load', () => {
  174. let hasDarkRules = false
  175. for (const styleSheet of Array.from(document.styleSheets)) {
  176. let mediaRules = []
  177. for (const cssRule of styleSheet.cssRules) {
  178. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  179. continue
  180. }
  181. // WARNING: Safari does not have/supports `conditionText`.
  182. if (cssRule.conditionText) {
  183. if (cssRule.conditionText !== prefersColorSchemeDark) {
  184. continue
  185. }
  186. } else {
  187. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  188. continue
  189. }
  190. }
  191. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  192. }
  193. // WARNING: do not try to insert a Rule to a styleSheet you are
  194. // currently iterating on, otherwise the browser will be stuck
  195. // in a infinite loop…
  196. for (const mediaRule of mediaRules) {
  197. styleSheet.insertRule(mediaRule.cssText)
  198. hasDarkRules = true
  199. }
  200. }
  201. if (hasDarkRules) {
  202. loadThemeForm('#theme-selector')
  203. }
  204. })
  205. </script>
  206. </body>
  207. </html>