-
Notifications
You must be signed in to change notification settings - Fork 0
/
feed.rss
499 lines (486 loc) · 51.7 KB
/
feed.rss
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
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
<channel>
<title>Feiko.IO</title>
<link>https://www.feiko.io/</link>
<description>Feiko's personal site about everything IoT and Tech</description>
<copyright>Copyright © 2023</copyright>
<managingEditor>Feiko Gorter</managingEditor>
<pubDate>Sun, 01 Jan 2023 13:08:41 GMT</pubDate>
<lastBuildDate>Sun, 01 Jan 2023 13:08:41 GMT</lastBuildDate>
<item>
<title>The Future of AI and IoT: Exciting Technologies to Watch in 2023</title>
<link>http://www.feiko.io/posts/2022-12-31-the-future-of-ai-and-iot-exciting-technologies-to-watch-in-2023</link>
<description>Exciting technologies to watch in 2023: WebAssembly, Risc-V, and AI. Follow the growth of .NET nanoFramework and its impact on the IoT domain.</description>
<enclosure url="http://www.feiko.io/images/ai-coding.gif" length="0" type="image" />
<guid>http://www.feiko.io/posts/2022-12-31-the-future-of-ai-and-iot-exciting-technologies-to-watch-in-2023</guid>
<pubDate>Sun, 01 Jan 2023 00:00:00 GMT</pubDate>
<content:encoded><p>As we move into 2023, there are a few exciting technologies on the horizon that are worth keeping an eye on, particularly in the fields of artificial intelligence (AI) and the Internet of Things (IoT). These advancements have the potential to significantly change the way we interact with our web browsers and the IoT domain, as well as the way we think about AI.</p>
<p> </p>
<h3 id="webassembly-the-future-of-web-applications">WebAssembly: The Future of Web Applications</h3>
<p> </p>
<p>One of the most notable technologies to watch out for is WebAssembly. This new standard allows developers to create web applications that behave much more like native apps, with fast performance and offline capabilities. This means that web applications will no longer be limited by the capabilities of JavaScript, and will be able to take advantage of the full power of the web browser.</p>
<p> </p>
<h3 id="webassembly-for-the-iot-domain">WebAssembly for the IoT Domain</h3>
<p> </p>
<p>WebAssembly is also making its way into the IoT domain, with projects like Wasm3 (<a href="https://github.com/wasm3/wasm3">https://github.com/wasm3/wasm3</a>) and Wasm Micro runtime (<a href="https://github.com/WebAssembly/wasm-micro-runtime">https://github.com/WebAssembly/wasm-micro-runtime</a>) leading the charge. In 2023, I hope to see the development of lightweight, easy-to-use embedded programming languages for WebAssembly. These languages could make scripting more accessible, and their lightweight nature could help to reduce runtime download and memory usage. This is especially important for smaller applications, where full-blown WebAssembly languages like .NET Blazor can take too long to download and start up. In this case, platforms like .NET nanoFramework could fill the gap and provide a more suitable solution.</p>
<p> </p>
<h3 id="risc-v-open-hardware-for-the-iot-domain">Risc-V: Open Hardware for the IoT Domain</h3>
<p> </p>
<p>Another technology that is gaining traction is Risc-V, an open hardware architecture that is particularly well-suited for the IoT domain. Many new Risc-V microcontrollers have the specs to support higher-end languages, even on small, embedded devices, while still being very power efficient. One example of this is the nanoFramework, which supports the Risc-V esp32-C3. This is particularly exciting for developers, as it opens up new possibilities for building more powerful and feature-rich IoT devices.</p>
<p> </p>
<h3 id="ai-the-most-disruptive-technology-of-all">AI: The Most Disruptive Technology of All?</h3>
<p> </p>
<p>But perhaps the most disruptive technology on the horizon is the rapid progress being made in the field of AI. I have to confess that this blog post was completely written using OpenAI ChatGPT, with my outline as input. The fact that this is possible is mind-boggling to me, and I can't wait to see how this technology will be used in 2023. However, there is also a scary side to consider, as AI has the potential to disrupt many industries and potentially displace human workers.</p>
<p> </p>
<p>As an axample of what AI can do. I asked ChatGPT to create the following HTML widget completely from scratch</p>
<div id="countdown" style="display: flex; flex-direction: column; align-items: center; background-color: #f9ca24; padding: 20px; border-radius: 10px;">
<h3 style="color: white; margin: 0;">🎉 Countdown to 2024 🎉</h1>
<h4 style="color: white; margin: 0;">Created by AI!</h2>
<div id="clock" style="color: white; font-size: 3em; margin: 20px 0;"></div>
<div id="message" style="color: white; font-size: 2em; margin: 20px 0;"></div>
</div>
<script>
const countDownDate = new Date("Jan 1, 2024 00:00:00").getTime();
const updateClock = setInterval(function() {
const now = new Date().getTime();
const distance = countDownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("clock").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(updateClock);
document.getElementById("clock").innerHTML = "";
document.getElementById("message").innerHTML = "🎉 Happy new year! 🎉";
}
}, 1000);
</script>
<p> </p>
<h3 id="the-growth-of-the.net-nanoframework-community">The Growth of the .NET nanoFramework Community</h3>
<p> </p>
<p>I'm also excited to see how the nanoFramework community continues to grow and gain more adoption in 2023. I hope more people will start developing for and with .NET nanoFramework, and that it will receive more funding and donations to support the implementation of features like generics and async/await. These advancements would make the platform even more powerful and useful for developers. It's worth noting that while generics have already been proven possible in nanoFramework, the challenge is in hooking it up to the Visual Studio debugger.</p>
<p> </p>
<h3 id="wishing-everyone-a-happy-2023">Wishing Everyone a Happy 2023</h3>
<p> </p>
<p>As we move into the new year, it's worth taking a moment to consider the impact that these new technologies will have on our lives. While there is certainly a lot of excitement around what the future holds, it's also important to remember the potential risks and drawbacks that come with any new technology. That said, I'm hopeful that these advances will be used for good in the world, and I wish everyone a very happy 2023 filled with peace, tolerance, and love.</p>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
<item>
<title>WebSocket Server for .NET nanoFramework</title>
<link>http://www.feiko.io/posts/2022-02-18-websocket-server-for-net-nanoframework</link>
<description>Run a Websocket Server and Webserver on a Microcontroller using .NET nanoFramework</description>
<enclosure url="http://www.feiko.io/images/screenshot-2022-02-18-12-22-47.png" length="0" type="image" />
<guid>http://www.feiko.io/posts/2022-02-18-websocket-server-for-net-nanoframework</guid>
<pubDate>Fri, 18 Feb 2022 11:31:43 GMT</pubDate>
<content:encoded><p>It’s been a little quite on my website lately. For good reasons. Last month’s I’ve been hard at work getting the nanoFramework library ready for release. In This blog I want to show how easy it is to get started with websockets on .NET nanoFramework. The blog goes together with a video I made demonstrating websockets for the Microsoft <a href="https://youtube.com/playlist?list=PLlrxD0HtieHh5_pOv-6xsMxS3URD6XD52">Internet of Things Show</a>.</p>
<h3 id="what-are-websockets-and-why-should-you-care-about-running-websockets-on-tiny-iot-devices">What are websockets and why should you care about running websockets on tiny IoT devices?</h3>
<p>Websockets is a web protocol that uses a normal HTTP request and strips away all the HTTP stuff so it has direct access to the underlying TCP Socket. This way the server client connections stays open and the server can continuously send information to the client and the other way around. This opposed to normal HTTP requests where a client asks for some information and gets a reply after which the connection is usually closed.
Imagine you have a webpage or a WebApp that you constantly want to update with new information. Then you want to be using websockets. Websockets are used more often on the World Wide Web than you might think. Every time you open a page in your browser and a chat bot starts a live conversation. You know this webpage is using websockets.</p>
<p>Now, why do you want to have websockets on tiny microcontrollers? Well imagine you have a small weather station on the roof of your house and you want to be able to monitor the wind in real-time. Having this weather station run a small websocket server is a great way of doing this. Having a real-time graph that updates every second or even less, is not a problem for websockets! Of course you can also use other techniques like MQTT or a direct TCP connection. But this requires your user to install some kind of app on there device. When using websockets you can use any device with a web browser to connect to your device without the need of installing any apps. It’s easy and it bring so much more fun to your IoT projects!</p>
<h3 id="how-to-get-started-with.net-nanoframework-and-websockets">How to get started with .NET nanoFramework and websockets?</h3>
<p>As always, the Websocket library it's <a href="https://github.com/nanoframework/System.Net.WebSockets">open source on Github</a> together with all the documentation and links to some sample projects. I’ve gone through the trouble of creating a websocket client as well as a websocket server implementation. For this blog we’ll be looking into the first sample <a href="https://github.com/nanoframework/Samples/tree/main/samples/WebSockets/WebSockets.Server.RgbSample">Server.RgbSample</a> using the nanoFramework WebSocket Server.</p>
<p>In this example we are going to control the RGB led of an <a href="https://docs.m5stack.com/en/core/atom_lite">ATOM Lite</a> ESP32 microcontroller device from M5Stack. The ATOM Lite is a great little and very cheap device with a RGB Led, a programable button and some extra IO’s. If you don’t own a ATOM Lite you can probably just use any ESP32, of course this is less fun 😉.</p>
<h3 id="the-code">The Code</h3>
<p>You can grab the code for the <a href="https://github.com/nanoframework/Samples/tree/main/samples/WebSockets/WebSockets.Server.RgbSample">WebSockets.Server.RgbSample</a> sample by cloning the complete <a href="https://github.com/nanoframework/Samples.git">Samples Git repo</a> or download a zip copy from GitHub. Go to the <code>.\Samples\samples\Websockets\WebSockets.Server.RgbSample</code> directory and open the <code>NFWebSockets.Server.RgbExample.sln</code> file with Visual Studio. If you want to run the code make sure you update all the NuGet packages to the latest preview versions. If you want to create your own websocket solution you can simply reference the <a href="https://www.nuget.org/packages/nanoFramework.System.Net.WebSockets.Server">nanoFramework.System.Net.WebSockets.Server</a> NuGet package.</p>
<blockquote>
<p><em>If you're new to nanoFramework, or run into trouble you can watch this <a href="https://www.feiko.io/posts/2022-01-03-getting-started-with-net-nanoframework">video</a> I've created on how to get started. You'll be up and running in now time!</em></p>
</blockquote>
<p>Yes you made it. Now it's time to get started with websockets, it's easy. Creating and starting the websocket server is done with the following code.</p>
<pre><code class="language-csharp">_wsServer = new WebSocketServer(new WebSocketServerOptions()
{
MaxClients = 10,
IsStandAlone = false
});
_wsServer.MessageReceived += WsServer_MessageReceived;
_wsServer.Start();
</code></pre>
<p>As you can see you can use the optional <code>WebSocketServerOptions</code> to set some extra options. It’s good practice to set a max number of websocket clients. This will make sure you don’t run out of resources. Remember it’s still only a small microcontroller with a few hundred kB of RAM.</p>
<p>By default, the websocket server will run as a standalone server hosted on port 80. Because we are also going to host our own WebApp we want to have it integrated with a webserver. To be able to do this I’ve set the <code>IsStandAlone</code> option to <code>false</code>.
Before we start the server we attach an event handler to the <code>MessageReceived</code> event. This event handler is called whenever there is an incoming websocket message from a client, this is where all the magic happens.</p>
<pre><code class="language-csharp">private static void WsServer_MessageReceived(object sender, MessageReceivedEventArgs e)
{
var wsServer = (WebSocketServer)sender;
if (e.Frame.MessageType == WebSocketMessageType.Binary &amp;&amp; e.Frame.MessageLength == 3)
{
AtomLite.NeoPixel.SetColor(Color.FromArgb(e.Frame.Buffer[0], e.Frame.Buffer[1], e.Frame.Buffer[2]));
wsServer.BroadCast(e.Frame.Buffer);
}
}
</code></pre>
<p>Here we see that the server is expecting the RGB color to be send as an array of three bytes. For every color one byte: Red Green and Blue. This color is send to the LED of the device and then send to all connected clients.</p>
<blockquote>
<p><strong>*Note:</strong> If you like you can of course also specify the client you want to send the information to. To monitor the connected clients you can use <code>WebSocketOpened</code> and <code>WebSocketClosed</code> event which will provide the <code>EndPoint</code> of the client that is used as an identifier for the websockets. <code>Listclients</code> will provide you with a list of endpoints of all connected clients.*</p>
</blockquote>
<p>Finally the code below shows how to handover a websocket request from the Webserver to the Websocket Server.</p>
<pre><code class="language-csharp">//webserver receive message
private static void WebServer_CommandReceived(object obj, WebServerEventArgs e)
{
//check the path of the request
if (e.Context.Request.RawUrl == &quot;/&quot;)
{
//check if this is a websocket request or a page request
if (e.Context.Request.Headers\[&quot;Upgrade&quot;] == &quot;websocket&quot;)
{
//Upgrade to a websocket
_wsServer.AddWebSocket(e.Context);
}
else
{
//Return the WebApp
e.Context.Response.ContentType = &quot;text/html&quot;;
e.Context.Response.ContentLength64 = html.Length;
WebServer.OutPutStream(e.Context.Response, html);
}
}
else
{
//Send Page not Found
e.Context.Response.StatusCode = 404;
WebServer.OutPutStream(e.Context.Response, &quot;Page not Found!&quot;);
}
}
</code></pre>
<p>Here we check if a request it's a Websocket request by checking the Upgrade header. If it is, we just handover it over to the webrequest context of the webserver using <code>_wsServer.AddWebSocket(e.Context)</code>. And the webserver will work its magic.
If the request is a regular web request we’ll return the WebApp. And that’s everything.</p>
<blockquote>
<p><strong>*Note:</strong> If you want to keep track of specific websocket users, you can use a custom header that you read using the webserver before you handover the request context. The request also contains the unique IPEndpoint that’s used by the webserver. This is one way to keep track of your clients.*</p>
</blockquote>
<h3 id="run-the-solution">Run the solution</h3>
<p>After you changed the WiFi <code>Ssid</code> and <code>Password</code> in the code you’re ready to fire everything up and see what happens. In the debug output you’ll find the URL to connect to the device. Make sure you’re on the same network as the device.</p>
<p>Open up a browser and connect to the device using the URL or the IP address of the device.
In the app you can pick a color. You'll notice that's very responsive. You can even drag over the color picker and the colors will change instantly. Now the background is the color that’s broadcasted to all connected clients. So let’s make it interesting and open up some extra browser tabs. Now if you run these tabs side by side you can see background color on all browser windows are changing in real-time. This is something you can’t achieve with normal HTTP requests!</p>
<blockquote>
<p><strong>Note:</strong> If you run the device without the debugger attached you can get even higher websocket throughput speeds.*</p>
</blockquote>
<h3 id="final-thoughts">Final thoughts</h3>
<p>By experimenting with this demo you're probably imagining how easy and fun it would be to create an app that would constantly output sensor data i.e. for a wind speed meter.
I hope you learned how easy and awesome it is to create a websocket server. Please let me know what you’re going to build using websockets. Have fun!</p>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
<item>
<title>Getting started with .NET nanoFramework</title>
<link>http://www.feiko.io/posts/2022-01-03-getting-started-with-net-nanoframework</link>
<description>Getting Started with .NET nanoFramework, C# for microcontrollers, using an ESP32 microcontroller and Visual Studio.</description>
<guid>http://www.feiko.io/posts/2022-01-03-getting-started-with-net-nanoframework</guid>
<pubDate>Mon, 03 Jan 2022 14:19:42 GMT</pubDate>
<content:encoded><p>In this video I'll show you how to get started with .NET nanoFramework, C# for microcontrollers. Just get yourself a cheap ESP32 microcontroller and follow along!</p>
<p>In this video I used the following resources:</p>
<ul>
<li><a href="https://docs.nanoframework.net/content/getting-started-guides/getting-started-managed.html">nanoFramework documentation</a></li>
<li><a href="https://github.com/nanoframework">Github nanoFramework</a></li>
<li><a href="https://visualstudio.microsoft.com/vs/">Visual Studio 2022</a></li>
<li><a href="https://www.espressif.com/en/products/socs/esp32">ESP32</a></li>
<li><a href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers">ESP32 USB driver</a></li>
</ul>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
<item>
<title>NanoFramework - C# for microcontrollers with 64k ram</title>
<link>http://www.feiko.io/posts/2021-05-17-nanoframework-c-for-microcontrollers-with-64k-ram</link>
<description>NanoFramework brings C# .NET to microcontrollers. Giving developers the best embedded experience and making IoT easy! </description>
<enclosure url="http://www.feiko.io/images/nanoframework.png" length="0" type="image" />
<guid>http://www.feiko.io/posts/2021-05-17-nanoframework-c-for-microcontrollers-with-64k-ram</guid>
<pubDate>Mon, 17 May 2021 20:00:00 GMT</pubDate>
<content:encoded><p>A lot of you may probably think ‘.NET nano... what now? I’ve never heard Scott Guthrie or Scott Hanselman talking about this nanoFramework during Microsoft build conference?’. You're right, and in my humble opinion they should start talking about this amazing framework because it has a great role to fulfill in the Internet of Things domain, especially for Microsoft.
<br />
<br />
</p>
<h3 id="micro-framework-is-dead-long-live-nanoframework">Micro Framework is dead, Long live nanoFramework!</h3>
<p><br />
</p>
<p>You could look at .NET nanoframework as the bastard C# son in the .NET world. nanoFramework is the direct descendant of the .NET Micro Framework. Micro Framework released in 2007 is a high level C# programming language for small devices with 256kb of ram and 512kb of flash. Released in a time nobody had even heard of the term IoT, the Micro Framework, was far ahead of its time. Although 256kb of ram may not sound like much, Micro Controllers with these amounts of memory were still quite expensive back in those days. Although Micro Framework made a promising start and had a great active community, the framework slowly lost terrain to other embedded microcontroller frameworks. While the rest of the .NET framework pushed on, Micro Framework was left behind. </p>
<p>Since 2007, the IT world has radically changed. With Cloud and smart phones, a whole new world and IT landscape took shape. This enabled the Internet of Things revolution. In the wake of this revolution, also grew the need for making development of these ‘things’ easy. Soon new high-level programming languages emerged, like MicroPython, Espruino (Javascript), TinyGo (Golang) and others. Although the Micro Framework was left behind, it was not forgotten. In 2017 a small group headed by José Simoes, started work on the new .NET nanoFramework. Salvaging what they could from the old deprecated Micro Framework and starting anew. They squeezed C# into systems with only 64kb of ram and 256kb of flash, making it truly ‘nano’, a monumental achievement.
<br />
<br />
</p>
<h3 id="why-nanoframework">Why nanoFramework</h3>
<p><br />
</p>
<p>Until 2007 developing embedded software for small microcontrollers was a laborious task, requiring you to write low level C or C++. Still, today writing C++ is a very viable and cost effective solution if you are planning on producing thousands of devices. Using higher programming languages on microcontrollers usually comes with a performance penalty. Meaning you have to use more capable microcontrollers, therefore, being more expensive and often less power efficient. This being said, the cost of purchasing a more powerful microcontroller has come down from many tens of dollars to sometimes a few dollars or less. These are devices that often already have WiFi, Bluetooth or other connectivity integrated in their silicon. These devices are very flexible and great for prototyping because they are so easy to program. I even use these devices in production environments. </p>
<p>Though Micro Framework was unique in 2007, today you can choose from several alternatives. There are several reasons I think nanoFramework is the most superior platform to date:</p>
<ol>
<li>With nanoFramework you can write C#. What more convincing do you need? If it’s good enough for Bill Gates, it should be good enough for you!</li>
<li>nanoFramework is mostly compatible with your normal .Net, a lot of libraries just run out of the box. </li>
<li>Full Visual Studio support with complete Intellisense. </li>
<li>Full debugging experience. Set breakpoints, step into, over, conditional breakpoints. Just attach your device, hit F5 and off you go!</li>
<li>Unit testing</li>
<li>Combine managed C# together with unmanaged C++</li>
<li>Open Source</li>
<li>Great active community.</li>
</ol>
<p>Specially the full Visual Studio IDE experience together with testing and debugging sets nanoFramework apart from the rest. In other higher languages you almost always have to write debug information to the console out. This makes debugging complex applications very hard. NanoFramework’s ability to set breakpoints dynamically reduces development time by a lot and minimizes frustration. </p>
<p>Although nanoFramework is very usable for production today, it’s still actively under development. Features and libraries are constantly being added. The nanoFramework team is really moving mountains with all the work they're doing. You can do a lot of great stuff like build a small webserver or use the AMQP library to connect to Azure IoT Hub. The greatest pain is not having generics and therefore also missing out on stuff like Tasks and async/await. Having to deal with non generic lists and some hardcore threading can sometimes feel like the .NET 1.0 stone age (it can also be fun and good practice). However, I have it from a very reliable source that generics and async/await are just around the corner!
<br />
<br />
</p>
<h3 id="final-thoughts">Final Thoughts</h3>
<p><br />
</p>
<p>NanoFramework is still mostly unknown to the .NET and embedded system developers. This is a shame, because if you are working with domotics or IoT, slaving away on your C++ skills or frustrated about bad debug experience, nanoFramework is just the thing for you. If you know C# and want to start with devices, why not pick up a 4 dollar ESP32 or other compatible board and get started today? You can join nanoFramework on discord and contribute on GitHub. In one of my next posts I will talk about using the Websockets library on nanoFramework. A library I have been working on for some time. Showcasing how cool and powerful C# on devices can be. </p>
<p>Finally, I really hope Microsoft will open their hearts to their bastard sibling and let nanoFramework in. NanoFramework can really make Microsoft Azure IoT much simpler. Creating the ability to share code between your embedded device and IoT backend. Think about it: why should IoT be more difficult than building an ASP.NET site or an WPF application? It’s time for the next step in the Microsoft IoT revolution. </p>
<p><br />
<strong>Useful links</strong></p>
<ul>
<li><a href="https://docs.nanoframework.net/content/getting-started-guides/getting-started-managed.html">Getting Started with nanoFramework</a></li>
<li><a href="https://www.nanoframework.net/">NanoFramework Homepage</a></li>
<li><a href="https://discord.com/invite/gCyBu8T">Discord support for nanoFramework</a></li>
</ul>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
<item>
<title>Adding Netlify CMS to your .NET powered static Website</title>
<link>http://www.feiko.io/posts/2021-05-07-adding-netlify-cms-to-your-net-powered-static-website</link>
<description>Create an .net powered website for free using Github Pages, Statiq.web and Netlify CMS - Part II</description>
<enclosure url="http://www.feiko.io/images/netlify-cms-example.png" length="0" type="image" />
<guid>http://www.feiko.io/posts/2021-05-07-adding-netlify-cms-to-your-net-powered-static-website</guid>
<pubDate>Fri, 07 May 2021 16:53:38 GMT</pubDate>
<content:encoded><p>This is part II of the series about creating your own .NET powered static website. Here you can find part I: <a href="https://www.feiko.io/posts/2021-04-30-create-your-own-net-powered-website-for-free">Create your own .net powered static website for FREE</a></p>
<p>In this tutorial we are going to use NetlifyCMS. Netlify CMS is a flat-file headless CMS. Flat-file means that content is saved to simple files rather than using a database like SQL or MongoDB. In our case, these are Markdown files. A headless CMS is a Content Management System that is completely detached and unaware of any backend systems used to generate your website. This differs completely from the systems we know from the ASP.NET world. A traditional CMS like Umbraco is completely built on top of ASP.NET MVC and uses a SQL database. The content management and public website are very much intertwined and done by the same hosting platform.</p>
<p>Flat-file and headless CMS systems are ideal for managing content of simple websites. These systems are usually very nimble and easy to set up.</p>
<p><strong>At the end of this tutorial you will have:</strong></p>
<ul>
<li>A repository running your actual clean static public GitHub Page</li>
<li>A second private repository running your .NET site-generator/backend that you build in Part I</li>
<li>The Netlify CMS that uses Netlify to update your markdown content on GitHub</li>
<li>A GitHub Actions attached to your site generator that will automatically update your website</li>
</ul>
<p>Let’s get started and pick up where we left off in Part I. You can also look into my <a href="https://github.com/Feiko/StaticBlogExample">example repo</a> on my GitHub.
<br />
<br />
</p>
<h3 id="step-1-adding-the-netlify-cms-and-github-repos"><strong>Step 1 -</strong> Adding the Netlify CMS and GitHub repos</h3>
<p><br />
</p>
<p>We start by adding Netlify CMS so we can add and manage our content in a friendly manner. Open the project you created in Part I and create an <em>admin</em> directory inside the <em>input</em> directory. In this directory we create an <em>index.html</em> file with the following magic Netlify CMS code:</p>
<pre><code class="language-html">ShouldOutput: true
---
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
&lt;title&gt;Content Manager&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Include the script that builds the page and powers Netlify CMS --&gt;
&lt;script src=&quot;https://unpkg.com/netlify-cms&#64;^2.0.0/dist/netlify-cms.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>Now we are going to push our code to a new GitHub repo on your GitHub. We can easily do this in the latest version of VS2019 using ‘Git Changes’. Make sure you give your repository a meaningful name like ‘MyWebSiteGenerator’. Please don’t tell me you don’t have a GitHub account!!! Shame on you, you call yourself a developer 😜 ???</p>
<?# Image Src="/images/create-github-repo-with-vs2019.png" Class="img-fluid" Alt="Create GitHub Repo using VS2019" Title="Create GitHub Repo using VS2019" /?>
<p><br />
<br />
</p>
<h3 id="step-2-registering-your-github-page"><strong>Step 2 -</strong> Registering your GitHub Page</h3>
<p><br />
</p>
<p>Now your code is in GitHub we will have to add some magic to hook up the NetlifyCMS. For this we first need to set up a Netlify site (we are not going to use this site… complicated I know. And, ‘Yes I wish there was a better way…’)</p>
<p>But first, now we are in GitHub, let’s do some plumbing for our GitHub page. Create a new public repository on your GitHub and name this repository &lt;YourGithubName&gt;.github.io. This will also be the domain where your website is hosted. Next we need to hook up your code to automatically deploy to this GitHub Page. Go inside the newly created Page repo and go to the ‘Settings’ tap and select 'Pages'. Press ‘Choose a theme’ and select the first theme and press ‘Select theme’. This will generate a branch called ‘gh-pages’ where the selected theme will deploy. Don’t worry we are going to overwrite this default theme with our own awesome static website.</p>
<p>If you know go to the ‘Pages’ section in your repo ‘Settings’, you should see in green ‘Your site is published at https://&lt;YourGithubName&gt;.github.io/’. If it says published at https://&lt;YourGithubName&gt;.github.io/&lt;RepoName&gt;/’ then you did not name your repo correctly &lt;YourGithubName&gt;.github.io. This will not work because the blog site expects to be published inside the root of your website domain!
<br />
<br />
</p>
<h3 id="step-3-setup-netlify-cms"><strong>Step 3 -</strong> Setup Netlify CMS</h3>
<p><br />
</p>
<p>To set up Netlify CMS follow the first two steps ‘creating an GitHub OAuth App’ and ‘Creating a Netlify Site’ from the following <a href="https://cnly.github.io/2018/04/14/just-3-steps-adding-netlify-cms-to-existing-github-pages-site-within-10-minutes.html">great blog</a>.</p>
<p>Now we can add the <em>config.yml</em> to <em>/input/admin</em> directory inside your code. This is the heart of the Netlify CMS. You can download my <em>config.yml</em> from my <a href="https://github.com/Feiko/StaticBlogExample/blob/master/input/admin/config.yml">GitHub Repo</a>. I’ve gone ahead and configured this <em>config.yml</em> file for you. You only have to change the backend settings inside the <em>config.yml</em> to target the GitHub Repo where your site generator lives (so not your GitHub Pages Repo). So change ‘repo: &lt;GitHubName&gt;/&lt;RepoName&gt;‘ i.e. feiko/StaticBlogExample. Also change the site domain 'site_domain' to the &lt;SiteName&gt;.netlify.app you just created when configuring Netlify. If you use a different branch then ‘master’ please also change this setting.</p>
<p>Go ahead and git commit and push this <em>config.yml</em> to GitHub. Now you can preview the site locally using the <code>dotnet run -- preview</code> command (see Part I) and browse to ‘localhost:5080/admin’. You should be able to log into your CMS using your GitHub credentials.</p>
<p>Now you can write a blog or page in the CMS. Netlify will automatically commit your new content to your remote GitHub repo. To preview the changes locally, you need to ‘git pull’ the content from your remote repo. Run the preview site and enjoy your freshly written blog… locally…</p>
<p><em><strong>Note:</strong></em></p>
<p>Don’t forget to commit and push your local changes to GitHub. You can also add the /output folder to the .gitignore file so you don’t keep pushing and pulling these changes.</p>
<p><em><strong>Note:</strong></em></p>
<p>If the admin page is displayed malformed mixed with CleanBlog theme elements. Then we need to tell Statiq to ignore the <em>admin</em> directory. If everything looks okay, then ignore this step.</p>
<p>To tell Statiq to ignore the <em>/input/admin</em> directory you can insert the following code to <em>program.cs</em> after ‘.CreateWeb(args)’.</p>
<pre><code class="language-csharp">.AddSetting(WebKeys.ExcludedPaths,
new List&lt;NormalizedPath&gt;
{
new NormalizedPath(&quot;input/admin&quot;),
})
</code></pre>
<p><br />
<br />
</p>
<h3 id="step-4-deploy-your-site-to-github-pages"><strong>Step 4 -</strong> Deploy your site to GitHub Pages</h3>
<p><br />
</p>
<p>Finally we come to the magic Sauce. We are going to host our site on our GitHub Page and use GitHub Actions to update your website automatically every time you commit a change in your CMS or on your GitHub repo.</p>
<p>First we are going to generate a token to allow Github Action to update your GitHub Pages. For this login into GitHub.com. In the top right click on your icon and in the drop-down menu select ‘Settings’. Now select ‘Developer Settings’ and then select ‘Personal access tokens’. Click ‘Generate new token’. Give the token a recognizable name in ‘Note’ i.e. ‘Page Token’, then <strong>only</strong> check ‘public_repo’ under ‘Select scopes’, at the bottom click the green ‘Generate token’ button. Copy the generated token to a temp document for later use.</p>
<p>Now we tell Statiq where to deploy or website, by adding the following code to Program.cs, after ‘.CreateWeb(args)</p>
<pre><code class="language-csharp">.DeployToGitHubPagesBranch(
&quot;&lt;githubName in my case: feiko&gt;&quot;,
&quot;&lt;RepoName Github Pages, in my case: feiko.github.io &gt;&quot;,
Environment.GetEnvironmentVariable(&quot;GITHUB_TOKEN&quot;),
&quot;&lt;the branch name that holds the page content, in my case: gh-pages&gt;&quot;
)
</code></pre>
<p>My complete program.cs looks like this:</p>
<pre><code class="language-csharp">using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Statiq.App;
using Statiq.Common;
using Statiq.Web;
namespace StaticBlogExample
{
public class Program
{
public static async Task&lt;int&gt; Main(string[] args) =&gt;
await Bootstrapper
.Factory
.CreateWeb(args)
.DeployToGitHubPagesBranch(
&quot;feiko&quot;,
&quot;feiko.github.io&quot;,
Environment.GetEnvironmentVariable(&quot;PAGE_TOKEN&quot;),
&quot;gh-pages&quot;
)
.AddSetting(WebKeys.ExcludedPaths,
new List&lt;NormalizedPath&gt;
{
new NormalizedPath(&quot;input/admin&quot;),
})
.RunAsync();
}
}
</code></pre>
<p>You can optionally test this code by changing the ‘Environment.GetEnvironmentVariable(&quot;PAGE_TOKEN&quot;)’, to the token string you copied earlier. Now run <code>dotnet run -- deploy</code>. Your content should now be visible inside your GitHub pages repo and you can visit your static website at ‘https://&lt;YourGithubName&gt;.github.io/’. It can take a couple of minutes for GitHub to start hosting your site the first time.</p>
<p><strong>Never</strong> commit your GitHub token to GitHub. So be sure to change this line back after you’ve finished. If you have published your token by accident, your token will no longer work and you have to renew your token.*</p>
<p>Now make sure you commit and push your code to GitHub for the last time.
<br />
<br />
</p>
<h3 id="step-5-automatic-deployment-using-github-actions"><strong>Step 5 -</strong> Automatic deployment using GitHub Actions</h3>
<p><br />
</p>
<p>The last step is to create a GitHub Action that will run the website generator every time you update your website using your CMS or checking in some new code.</p>
<p>Go to GitHub and open the Repo with your site generator code (not your GitHub Page repo). Open the tab ‘Actions’ and click ‘set up a workflow yourself -&gt;’.</p>
<p>Replace the code inside the editor with the following script:</p>
<pre><code class="language-csharp">name: Publish GitHub_Page
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout&#64;v2
- name: Setup .NET
uses: actions/setup-dotnet&#64;v1
with:
dotnet-version: 5.0.x
- run: dotnet run -- deploy
env:
PAGE_TOKEN: ${{ secrets.PAGE_TOKEN }}
</code></pre>
<p>Then press the green ‘start commit’ button. Finally we need to generate an authorization token that will allow Actions to deploy to GitHub Pages. Go to the ‘settings’ tap of your site-generator-repo and in your left menu select ‘Secrets’ to create a secret for your GitHub commit token. Click ‘New repository secret’. Name this secret ‘PAGE_TOKEN', inside the ‘Value’ paste the token you generated earlier. Now press ‘Add secret’ and voila your token is stored securely inside your GitHub Repo.</p>
<p>To kick off the action and deploy your site the first time you need to make a Git commit to your website. The easiest way to do this is by creating a readme.md inside the root of your site generator repo in Github. This commit will kick off the action. You can see your action status in the GitHub ‘action’ tab. After your Action has run successfully, you see your static blog at https://&lt;YourGithubName&gt;.github.io/. From now on all changes you make inside your CMS https://&lt;YourGithubName&gt;.github.io/admin/, will be committed to the GitHub websiteGenerator repo. This will kick off the action and update your website. </p>
<p>And now you're <strong>done</strong>! Congratulations, how cool! You see, now all .NET geeks can blog like Scott Hanselman! I can’t wait for you to share your knowledge with the world.</p>
<p>If you want to create a more special website like myself, you can create your own theme or reuse a theme you already have. Be sure to check out the documentation on <a href="https://statiq.dev/web/">https://statiq.dev/web/</a>, also look at the documentation of Netlify CMS on <a href="https://www.netlifycms.org/docs/configuration-options/">how to configure your config.yml file</a>. Happy coding!
<br />
<br />
</p>
<h3 id="conclusion"><strong>Conclusion</strong></h3>
<p><br />
</p>
<p>Having a .NET powered static page generator made my life a lot easier. I was able to reuse a lot of my old ASP.NET knowledge when creating my own web theme. Setting up Netlify CMS together with a Netlify account can feel a bit circumstantial. But having a CMS experience makes adding content a lot easier. Because we have used a flat-file headless CMS we can easily switch from the CMS system. Perhaps in the future we would have a CMS built using .NET Blazor, that would be really awesome! </p>
<p>Please let me know if you found this blog helpful or have any questions. Happy coding!</p>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
<item>
<title>Create your own .net powered static website for FREE</title>
<link>http://www.feiko.io/posts/2021-04-30-create-your-own-net-powered-website-for-free</link>
<description>Create an .net powered website for free using Github Pages, Statiq.web and NetlifyCMS - Part I</description>
<enclosure url="http://www.feiko.io/images/computer-code_awxc4nofzn.jpg" length="0" type="image" />
<guid>http://www.feiko.io/posts/2021-04-30-create-your-own-net-powered-website-for-free</guid>
<pubDate>Sat, 01 May 2021 11:00:45 GMT</pubDate>
<content:encoded><p>Blog like Scott Hanselman. What self-respecting .net developer has not thought about writing their own blogs? I certainly have. As an Internet of Things Specialist and .net developer, I have embarked on many IT adventures over the years. Adventures of lessons learned, amusement, frustrations and wins that I’d love to share with the world. Being a non-native English-speaking dyslexic has held me from doing this, but no longer! With this blog about creating a 100% .NET powered static website for free, I’m officially launching my own blog and video website. Feiko.IO says: “HELLO WORLD!!!”</p>
<p>When I decided to start a blog website, I soon found out that hosting a cool Umbraco powered WEB app on Azure is quite expensive for a small site. The cheapest usable Web App tier would set me back 46 euro a month. This is way too much for this stubborn, lazy, cheap ass developer. So I decided that ASP.NET is a no go.</p>
<p>I found the website world has radically changed since I built my last website in 2014. It’s a brave new world out there. Finally, I found a solution to my website problem: Static Websites! Static websites are fast and cheap. But being a stubborn developer, I want to build this website using .net technology, using ASP.NET goodies like Visual Studio tooling, Razor script and CSHTML. And on top of everything I want a dynamic Content Management System. Follow me on my adventure in creating the ideal .net static Website, like the one you are on right now! Because: Yes, you can have it all!</p>
<p>In this blog I’ll show you how to quickly create your own simple .net powered static blog website using the CleanBlog theme. Next week, in part II, we’ll talk about adding a headless flat-file Content Management System and hosting your site for free on GitHub Pages. It’s all about making blogging fun and easy!</p>
<p><br />
<strong>Requirements</strong></p>
<ul>
<li>Basic c# skills</li>
<li>Your favorite IDE (Visual Studio 2019)</li>
<li>.net 5 (other versions probably will work)</li>
<li>git
<br />
</li>
</ul>
<p><br />
</p>
<h3 id="step-1-create-statiq-hello-world"><strong>STEP 1 -</strong> create Statiq ‘HELLO WORLD’</h3>
<p><br />
</p>
<p>Start by following the great ‘getting started’ tutorial over on <a href="https://statiq.dev/web/">Statiq.dev</a></p>
<p>Now you have your first static website but there’s not a lot going on, just plain old HTML. Basically, that’s of course what static websites are just some HTML, CSS and JavaScript.</p>
<p>For now, to render a new page, you have to write a markup file inside your input directory and at some YAML to the top of the page. I know this is great for many people, but remember I’m a dyslexic so I’m going to have all kinds of typos in my YAML. Also, I will not remember all variables that I need to put at the top of my markdown file. That’s why I want a CMS. Clearly we’re just getting started and are still a far cry from a good-looking blog site. But that is all going to change… Just bear with me.<br />
<br />
<br />
</p>
<h3 id="step-2-create-our-cleanblog-blogging-site"><strong>Step 2 -</strong> create our ‘CleanBlog’ blogging site</h3>
<p><br />
</p>
<p>Now we are going to create a proper site using the<a href="https://startbootstrap.com/previews/clean-blog"> ‘CleanBlog’</a> theme.</p>
<p>For this, open a terminal (inside Visual Studio solution explorer, right click on your project and select ‘Open in Terminal’)</p>
<p>Clone the CleanBlog theme <a href="https://github.com/statiqdev/CleanBlog">repo</a> by typing the following:</p>
<p><code>git clone https://github.com/statiqdev/CleanBlog.git theme</code></p>
<blockquote>
<p><em>If you used git clone to get the theme, make sure you remove the hidden .git directory inside the theme directory. Else you will get an ‘The process '/usr/bin/git' failed with exit code 128’ when we are going to publish our website in part II.</em> </p>
<p><em>Alternative: just create a new directory called ‘theme’ inside your project and extract the code from the repo inside this directory.</em></p>
</blockquote>
<p>If you are still running the statiq preview, than exit this by typing: <code>Exit()</code> inside the terminal that’s running statiq. Then run your project. This will generate the statiq website. Make sure you still have your index.md file inside the input directory, else there will be no content to create a website from. You can run the preview page at any time using the command:</p>
<p><code>Dotnet run -- preview</code></p>
<p>The preview mode will live update. How cool is that? Good work, Statiq!
You can browse again to your website localhost:5080 and should see:</p>
<?# Image Src="/images/helloworld.png" Class="img-fluid" Alt="Hello World site" Title="Your hello world landing page" /?>
<p>This is starting to look like a real website already. All that in just a matter of minutes!
<br />
<br />
</p>
<h3 id="step-3-create-your-first-blog"><strong>Step 3 -</strong> Create your first Blog</h3>
<p><br />
</p>
<p>Statiq.web will by default look for blog content inside the input/posts directory. Create this posts directory.</p>
<p>If you open <em>/theme/readme.md</em>, you’ll see that a page expects the following YAML input:</p>
<ul>
<li>`Title`: The title of the page (or post).</li>
<li>`Description`: A description of the page.</li>
<li>`Lead`: Descriptive text that expands on the title, usually used for posts.</li>
<li>`Tags`: Tags for a blog post.</li>
<li>`Published`: The date a page or post was published.</li>
<li>`Image`: Path to an image for the page or post.</li>
<li>`ShowInNavbar`: Set to `false` to hide the page in the top navigation.</li>
<li>`IsPost`: Set to `false` to exclude the file from the set of posts. This will also disable post styling like displaying tags in the header.</li>
</ul>
<p>This is too much typing for my dyslexic brain. But be a hero and try it out, just like you build your index.md. Make sure your test blog is inside the <em>posts</em> directory. If you add content to your posts, you probably want to remove the <em>/input/index.md</em> you created in step 1. The index.html actually overwrites the <em>index.cshtml</em> inside the theme, therefore hiding you posts. You can add images to the <em>/input/image</em>s directory, which you need to create. You can add your image to your blog using by setting the <em>Image</em> variable:</p>
<p><code>Image: /images/&lt;your image file name&gt;</code></p>
<p>Also try out some of the cool supported markdown <a href="https://statiq.dev/web/content-and-data/content/shortcodes">ShortCodes</a> inside your blog.</p>
<p>Okay, that’s it for this tutorial. We are already having fun with .net and static websites. A great thanks to <a href="https://daveaglick.com/">Dave Glick</a> for the splendid work on Statiq platform. None of this would be possible without his work. In my next post, part II, we are going to add the long awaited CMS and start hosting your site for free on Github Pages. I can’t wait!</p>
</content:encoded>
<comments xmlns="http://purl.org/rss/1.0/modules/slash/">0</comments>
</item>
</channel>
</rss>