-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1460 lines (1047 loc) · 72.2 KB
/
Copy pathindex.html
File metadata and controls
1460 lines (1047 loc) · 72.2 KB
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
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不会写代码，也能用好 GitHub：写给普通人的入门指南</title>
<meta name="description" content="零基础 GitHub 入门指南，面向非程序员，图文详解注册、下载、搜索、Releases 安装与常见命令。">
<style>
:root {
--bg: #f4f6f9;
--surface: #ffffff;
--text: #1a1a2e;
--text-secondary: #4a5568;
--accent: #0969da;
--accent-hover: #0550ae;
--border: #e2e8f0;
--code-bg: #f6f8fa;
--quote-bg: #f0f7ff;
--quote-border: #0969da;
--shadow: 0 1px 3px rgba(0,0,0,.08);
--radius: 12px;
--toc-width: 232px;
--toc-bg: #ffffff;
--toc-active: #0969da;
--toc-hover-bg: #f0f7ff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.8;
font-size: 17px;
}
/* ── Hero ── */
.hero {
width: 100%;
max-height: 420px;
overflow: hidden;
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}
.hero img { width: 100%; height: auto; display: block; object-fit: cover; }
/* ── Page layout ── */
.page-wrapper {
max-width: 1120px;
margin: 0 auto;
padding: 2rem 1.5rem 5rem;
display: flex;
align-items: flex-start;
gap: 1.75rem;
}
/* ── Sidebar TOC ── */
.toc-sidebar {
width: var(--toc-width);
flex-shrink: 0;
position: sticky;
top: 1.5rem;
max-height: calc(100vh - 3rem);
overflow-y: auto;
background: var(--toc-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.toc-sidebar::-webkit-scrollbar { width: 4px; }
.toc-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .85rem 1rem .75rem;
border-bottom: 1px solid var(--border);
font-weight: 700;
font-size: .88rem;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-secondary);
}
.toc-close {
display: none;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1;
padding: 2px 4px;
border-radius: 4px;
}
.toc-close:hover { background: var(--border); }
.toc-list {
list-style: none;
padding: .5rem 0;
margin: 0;
}
.toc-list li { margin: 0; }
.toc-list a {
display: block;
padding: .35rem 1rem;
font-size: .84rem;
color: var(--text-secondary);
text-decoration: none;
line-height: 1.45;
border-left: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.toc-list a:hover {
background: var(--toc-hover-bg);
color: var(--accent);
text-decoration: none;
}
.toc-list a.active {
color: var(--toc-active);
border-left-color: var(--toc-active);
background: var(--toc-hover-bg);
font-weight: 600;
}
.toc-list .toc-h3 a {
padding-left: 1.75rem;
font-size: .81rem;
}
/* ── Content area ── */
.content-area {
flex: 1;
min-width: 0;
}
article {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2.5rem 2rem;
}
/* scroll offset for sticky nav - headings need room */
h1, h2, h3 { scroll-margin-top: 1.5rem; }
h1 {
font-size: 1.9rem;
line-height: 1.35;
margin-bottom: 1.25rem;
color: var(--text);
letter-spacing: -0.02em;
}
h2 {
font-size: 1.45rem;
margin: 2.5rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--border);
color: var(--text);
}
h3 {
font-size: 1.15rem;
margin: 2rem 0 .75rem;
color: var(--text);
}
p { margin-bottom: 1rem; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
ul, ol { margin: 0 0 1rem 1.5rem; }
li { margin-bottom: .4rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
blockquote.callout {
background: var(--quote-bg);
border-left: 4px solid var(--quote-border);
padding: 1rem 1.25rem;
margin: 1.25rem 0;
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--text-secondary);
font-size: .95rem;
}
blockquote.callout p { margin: 0 0 .4rem; }
blockquote.callout p:last-child { margin: 0; }
pre {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
overflow-x: auto;
margin: 1rem 0 1.25rem;
font-size: .9rem;
line-height: 1.6;
}
code {
font-family: "SF Mono", "Fira Code", Consolas, monospace;
font-size: .88em;
}
p code, li code, td code {
background: var(--code-bg);
padding: .15em .4em;
border-radius: 4px;
border: 1px solid var(--border);
}
.table-wrap { overflow-x: auto; margin: 1rem 0 1.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { border: 1px solid var(--border); padding: .6rem .85rem; text-align: left; }
th { background: var(--code-bg); font-weight: 600; }
tr:nth-child(even) td { background: #fafbfc; }
.figure { margin: 1.5rem 0 2rem; text-align: center; }
.figure img {
max-width: 100%; height: auto;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.figure figcaption {
margin-top: .65rem;
font-size: .85rem;
color: var(--text-secondary);
line-height: 1.5;
}
footer {
text-align: center;
padding: 2rem 1rem;
color: var(--text-secondary);
font-size: .85rem;
}
/* ── Mobile FAB ── */
.toc-fab {
display: none;
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 200;
background: var(--accent);
color: #fff;
border: none;
border-radius: 50px;
padding: .65rem 1.1rem;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 16px rgba(9,105,218,.35);
transition: background .15s, transform .15s;
}
.toc-fab:hover { background: var(--accent-hover); transform: translateY(-2px); }
/* ── Overlay backdrop ── */
.toc-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 299;
}
.toc-backdrop.visible { display: block; }
/* ── Responsive ── */
@media (max-width: 1060px) {
.toc-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(var(--toc-width), 80vw);
border-radius: 0 var(--radius) var(--radius) 0;
max-height: 100vh;
z-index: 300;
transform: translateX(-110%);
transition: transform .25s ease;
border-left: none;
}
.toc-sidebar.open { transform: translateX(0); }
.toc-close { display: flex; align-items: center; justify-content: center; }
.toc-fab { display: flex; align-items: center; gap: .4rem; }
.page-wrapper { padding-top: 1.5rem; }
}
@media (max-width: 640px) {
article { padding: 1.5rem 1.25rem; }
body { font-size: 16px; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; }
}
</style>
</head>
<body>
<header class="hero">
<img src="image/banner.png" alt="给非程序员群体的 GitHub 小白教程">
</header>
<!-- Mobile overlay backdrop -->
<div class="toc-backdrop" id="tocBackdrop"></div>
<div class="page-wrapper">
<!-- Sidebar TOC -->
<nav class="toc-sidebar" id="tocSidebar" aria-label="文章目录">
<div class="toc-header">
<span>目录</span>
<button class="toc-close" id="tocClose" aria-label="关闭目录">✕</button>
</div>
<ul class="toc-list">
<li class="toc-h2"><a href="#一-github-到底是什么-用一个比喻说清楚">一、GitHub 是什么？</a></li>
<li class="toc-h2"><a href="#二-注册账号-5-分钟搞定">二、注册账号</a></li>
<li class="toc-h2"><a href="#三-你最常用到-github-的场景">三、常用场景</a></li>
<li class="toc-h3"><a href="#场景一-下载别人的项目或文件">场景一：下载项目或文件</a></li>
<li class="toc-h3"><a href="#场景二-搜索你感兴趣的项目">场景二：搜索项目</a></li>
<li class="toc-h3"><a href="#场景三-读懂一个项目页面">场景三：读懂项目页面</a></li>
<li class="toc-h3"><a href="#场景四-给自己创建一个仓库">场景四：创建仓库</a></li>
<li class="toc-h2"><a href="#四-markdown-不会代码也能用的排版语言">四、Markdown 入门</a></li>
<li class="toc-h2"><a href="#五-readme-里那些-看不懂的命令-是什么意思">五、看不懂的命令？</a></li>
<li class="toc-h3"><a href="#先理解一件事-有些软件需要-运行环境">运行环境是什么</a></li>
<li class="toc-h3"><a href="#vs-code-打开和编辑项目文件的标配工具">📝 VS Code</a></li>
<li class="toc-h3"><a href="#python-和-pip">🐍 Python & pip</a></li>
<li class="toc-h3"><a href="#node-js-和-npm">🟢 Node.js & npm</a></li>
<li class="toc-h3"><a href="#java-和相关工具">☕ Java</a></li>
<li class="toc-h3"><a href="#其他你可能遇到的">🦀 其他语言</a></li>
<li class="toc-h3"><a href="#docker-重点推荐">🐳 Docker</a></li>
<li class="toc-h3"><a href="#一张速查表-看到什么命令-需要装什么">速查表</a></li>
<li class="toc-h3"><a href="#关于-虚拟环境-为什么-readme-总让你先建一个">虚拟环境</a></li>
<li class="toc-h2"><a href="#八-几个常见误解-帮你扫清障碍">八、常见误解</a></li>
<li class="toc-h2"><a href="#九-从今天开始-你可以做的三件事">九、行动建议</a></li>
<li class="toc-h2"><a href="#总结">总结</a></li>
<li class="toc-h2"><a href="#延伸阅读">延伸阅读</a></li>
</ul>
</nav>
<!-- Main content -->
<div class="content-area">
<article>
<h1 id="不会写代码-也能用好-github-写给普通人的入门指南">不会写代码，也能用好 GitHub：写给普通人的入门指南</h1>
<blockquote class="callout lead">
<p>"GitHub 不就是程序员用来存代码的地方吗？跟我有什么关系？"</p>
</blockquote>
<p>我第一次听到 GitHub 这个名字，也是这么想的。</p>
<p>但后来我发现，<strong>GitHub 早就不只是程序员的地盘了。</strong> 设计师在上面分享素材，作家在上面协作写作，研究者在上面发布数据集，甚至有人把自己的人生目标清单也放在上面管理。</p>
<p>如果你曾经：</p>
<ul><li>想下载一个免费的开源工具，却不知道从哪里找</li><li>想了解某个热门 AI 项目到底是什么</li><li>想参与一个你感兴趣的项目，却不知道怎么开口</li></ul>
<p>那这篇文章就是写给你的。我会用<strong>不假设你有任何技术背景</strong>的方式，带你把 GitHub 从一个陌生词汇，变成你真正用得上的工具。</p>
<hr>
<h2 id="一-github-到底是什么-用一个比喻说清楚">一、GitHub 到底是什么？用一个比喻说清楚</h2>
<p>想象这样一个场景：</p>
<p>你和几个朋友合写一本书。你们不在同一个城市，每个人负责不同的章节。你们用 Word 写好，通过微信发给彼此，然后……</p>
<ul><li>"哎，我刚才改的那个版本你覆盖掉了！"</li><li>"等等，这是第几稿了？是 <code>书稿_最终版_真的最终_v3_改.docx</code> 吗？"</li><li>"我发的那个有问题，先别用，我再发一版！"</li></ul>
<p>这种噩梦，你一定不陌生。</p>
<figure class="figure">
<img src="image/01.png" alt="Git 与 GitHub 如何解决多人协作的版本混乱问题" loading="lazy">
<figcaption>Git 与 GitHub 如何解决多人协作的版本混乱问题</figcaption>
</figure>
<p><strong>GitHub 解决的，就是这个问题。</strong></p>
<p>它的核心是一套叫 <strong>Git</strong> 的"版本控制系统"——简单说，就是<strong>帮你记录文件每一次修改的历史</strong>，谁在什么时候改了什么，都清清楚楚。而 GitHub，就是在这套系统上搭建的一个<strong>在线平台</strong>，让全世界的人都能协作、分享、讨论。</p>
<p>你可以把 GitHub 理解成：</p>
<div class="table-wrap"><table>
<tr><th>你熟悉的东西</th><th>GitHub 里对应的概念</th></tr>
<tr><td>文件夹</td><td>仓库（Repository / Repo）</td></tr>
<tr><td>保存文件</td><td>提交（Commit）</td></tr>
<tr><td>另存为新版本</td><td>分支（Branch）</td></tr>
<tr><td>把修改合并进来</td><td>合并（Merge）</td></tr>
<tr><td>复制别人的文件夹</td><td>Fork</td></tr>
<tr><td>在文档里留评论</td><td>Issue / Pull Request</td></tr>
</table></div>
<p>不需要死记这些词，对于非程序员仅使用软件而已，如果后面用到的时候慢慢查即可。</p>
<hr>
<h2 id="二-注册账号-5-分钟搞定">二、注册账号：5 分钟搞定</h2>
<figure class="figure">
<img src="image/02.png" alt="GitHub 注册流程：点击 Sign up 并填写账号信息" loading="lazy">
<figcaption>GitHub 注册流程：点击 Sign up 并填写账号信息</figcaption>
</figure>
<p>打开 <a href="https://github.com" target="_blank" rel="noopener">github.com</a>，点右上角的 <strong>Sign up（注册）</strong>。</p>
<p>填写：</p>
<ol><li><strong>邮箱地址</strong>（用你常用的）</li><li><strong>密码</strong></li><li><strong>用户名</strong>（这是你在 GitHub 上的"ID"，会出现在你的个人主页链接里，比如 <code>github.com/你的用户名</code>，认真想一个）</li></ol>
<p>然后验证邮箱，就完成了。<strong>完全免费。</strong></p>
<blockquote class="callout">
<p>💡 <strong>小提示</strong>：GitHub 的界面是英文的，但不要怕。大多数操作按钮都很直观，而且 Chrome 浏览器自带翻译功能，右键页面选"翻译成中文"就能将就用。</p>
</blockquote>
<hr>
<h2 id="三-你最常用到-github-的场景">三、你最常用到 GitHub 的场景</h2>
<h3 id="场景一-下载别人的项目或文件">场景一：下载别人的项目或文件</h3>
<p>这是普通人最常用到 GitHub 的方式。比如你在网上看到一篇文章，说"源码在 GitHub 上"，你该怎么办？</p>
<figure class="figure">
<img src="image/03.png" alt="仓库页面点击 Code 按钮，选择 Download ZIP 或复制克隆地址" loading="lazy">
<figcaption>仓库页面点击 Code 按钮，选择 Download ZIP 或复制克隆地址</figcaption>
</figure>
<p><strong>方法一：直接下载 ZIP 压缩包</strong></p>
<p>进入一个项目页面（也叫"仓库页面"），找到绿色的 <strong><code>< > Code</code></strong> 按钮，点开，选 <strong><code>Download ZIP</code></strong>，就像下载普通文件一样，下载到本地解压就行。</p>
<p>不需要安装任何东西，不需要懂命令行。</p>
<p><strong>方法二：用 <code>git clone</code> 克隆整个仓库（推荐用于需要"跑起来"的项目）</strong></p>
<p>如果你打算实际运行一个项目（而不只是看看代码），<code>git clone</code> 是比下载 ZIP 更好的方式。它会把整个仓库完整地"复制"到你的电脑上，包括完整的版本历史，而且后续如果项目更新了，你只需要一条命令就能同步最新内容，不用重新下载整个压缩包。</p>
<figure class="figure">
<img src="image/04.png" alt="在 git-scm.com 下载并安装 Git" loading="lazy">
<figcaption>在 git-scm.com 下载并安装 Git</figcaption>
</figure>
<p><strong>第一步：安装 Git</strong></p>
<p><code>git clone</code> 命令需要先安装 <strong>Git</strong>。</p>
<ul><li><strong>Windows</strong>：去 <a href="https://git-scm.com/download/win" target="_blank" rel="noopener">git-scm.com</a> 下载安装，一路默认选项即可</li><li><strong>Mac</strong>：打开终端，输入 <code>git --version</code>，如果没装过，系统会自动弹出安装提示，按提示装就行</li><li><strong>验证是否安装成功</strong>：终端里输入 <code>git --version</code>，输出版本号即代表成功</li></ul>
<p><strong>第二步：找到仓库的克隆地址</strong></p>
<p>进入 GitHub 仓库页面，点绿色的 <strong><code>< > Code</code></strong> 按钮，切换到 <strong>HTTPS</strong> 标签，复制那个以 <code>https://github.com/</code> 开头的链接。</p>
<p><strong>第三步：在终端里执行克隆命令</strong></p>
<p>打开终端，先用 <code>cd</code> 命令切换到你想存放项目的文件夹，再执行：</p>
<pre><code class="language-bash">git clone 刚才复制的链接</code></pre>
<p>举个例子：</p>
<pre><code class="language-bash">cd Desktop
git clone https://github.com/某用户/某项目.git</code></pre>
<p>回车之后，Git 会开始下载，你会看到进度信息。下载完成后，桌面上就多了一个以项目名命名的文件夹，里面就是完整的项目。</p>
<p><strong>后续如果项目更新，只需要进入项目文件夹，执行：</strong></p>
<pre><code class="language-bash">cd 项目文件夹名
git pull</code></pre>
<p>它会自动把最新的改动同步下来，比重新下载 ZIP 方便多了。</p>
<blockquote class="callout">
<p>💡 <strong>ZIP 下载 vs git clone，该用哪个？</strong></p>
<p>如果你只是想<strong>看看代码或者拿几个文件</strong>，ZIP 更简单直接。如果你打算<strong>实际运行这个项目、或者长期跟进更新</strong>，<code>git clone</code> 是更好的选择——尤其是后面要执行 <code>npm install</code> 或 <code>pip install</code> 这类命令的情况，都是默认你已经 clone 下来了。</p>
</blockquote>
<hr>
<h3 id="场景二-搜索你感兴趣的项目">场景二：搜索你感兴趣的项目</h3>
<figure class="figure">
<img src="image/05.png" alt="GitHub 页面左上角的搜索框" loading="lazy">
<figcaption>GitHub 页面左上角的搜索框</figcaption>
</figure>
<p>GitHub 的搜索框在页面左上角，就像用百度或者 Google 一样直接搜关键词。</p>
<figure class="figure">
<img src="image/06.png" alt="搜索 awesome python 时可按 Stars 排序、按语言筛选" loading="lazy">
<figcaption>搜索 awesome python 时可按 Stars 排序、按语言筛选</figcaption>
</figure>
<p>但有几个小技巧，能让搜索结果好很多：</p>
<ul><li>搜 <strong><code>awesome + 关键词</code></strong>：这是 GitHub 上最值得养成的搜索习惯之一，下面单独说</li><li>按 <strong>Stars（⭐）排序</strong>：Stars 是别人给项目点的"收藏"，数量越多说明越受欢迎，可以作为参考</li><li>用 <strong>语言筛选</strong>：如果你知道自己想要 Python 或者 JavaScript 的项目，可以在左侧筛选</li></ul>
<blockquote class="callout">
<p>⭐ GitHub 上的 Star，就像微博的收藏或者抖音的点赞，是衡量一个项目受欢迎程度的重要指标。</p>
</blockquote>
<hr>
<p><strong>📌 重点说说：awesome 系列是什么</strong></p>
<p>如果你只学一个 GitHub 搜索技巧，那就学这个。</p>
<p>"awesome"是 GitHub 上一种约定俗成的命名规范——当有人整理了某个领域内<strong>最值得关注的工具、资源、教程、项目</strong>的精选清单，通常就会把这个仓库命名为 <code>awesome-xxx</code>。</p>
<p>这类清单的特点是：由社区共同维护，经过长期筛选，质量远比你随手搜到的文章靠谱。它不是某一个人的推荐，而是数千人共同投票验证过的结果。</p>
<p>搜索方式很简单，直接在 GitHub 搜索框输入：</p>
<pre><code class="language-text">awesome 你感兴趣的关键词</code></pre>
<p>几个真实例子：</p>
<div class="table-wrap"><table>
<tr><th>搜索词</th><th>你能找到什么</th></tr>
<tr><td><code>awesome python</code></td><td>Python 优质库、框架、工具的完整清单</td></tr>
<tr><td><code>awesome selfhosted</code></td><td>可以自己部署的开源服务大全（网盘、笔记、书签……）</td></tr>
<tr><td><code>awesome mac</code></td><td>Mac 上值得安装的优质软件清单</td></tr>
<tr><td><code>awesome chatgpt prompts</code></td><td>经过验证的 ChatGPT 提示词合集</td></tr>
<tr><td><code>awesome design tools</code></td><td>设计师工具资源汇总</td></tr>
<tr><td><code>awesome obsidian</code></td><td>Obsidian 插件、主题、工作流推荐</td></tr>
</table></div>
<p>打开一个 awesome 仓库，你会看到一份按分类整理好的超长清单，每个条目都附有简短说明和链接。与其在互联网上东搜西找，不如直接来这里按图索骥——通常一个下午就能找到某个领域你需要的所有工具。</p>
<blockquote class="callout">
<p>💡 <strong>入门推荐</strong>：搜索 <code>awesome</code> 本身（不加任何关键词），置顶结果里有一个叫 <a href="https://github.com/sindresorhus/awesome" target="_blank" rel="noopener">sindresorhus/awesome</a> 的元清单，里面收录了各领域 awesome 仓库的总目录，是探索 GitHub 资源的绝佳起点。</p>
</blockquote>
<hr>
<h3 id="场景三-读懂一个项目页面">场景三：读懂一个项目页面</h3>
<figure class="figure">
<img src="image/07.png" alt="仓库页面：Stars、Forks、Issues 与 Releases 的位置" loading="lazy">
<figcaption>仓库页面：Stars、Forks、Issues 与 Releases 的位置</figcaption>
</figure>
<p>进入一个仓库，你会看到一堆文件，可能还有各种陌生的标签。别慌，先找这几个地方：</p>
<p><strong>1. README 文件</strong></p>
<p>几乎每个正经项目都有一个 <code>README.md</code> 文件，会自动显示在页面底部。这就是这个项目的"说明书"，写了这是什么、能干什么、怎么用。这是你首先应该读的地方。</p>
<p><strong>2. Stars 和 Forks 数量</strong></p>
<p>在仓库名称下方，你会看到 ⭐ Stars 和 🍴 Forks 的数量。Stars 越多越受欢迎；Forks 表示有多少人"复制"了这个项目去自己研究或改造。</p>
<p><strong>3. Issues（问题/讨论区）</strong></p>
<p>点上方的 <code>Issues</code> 标签，你能看到大家对这个项目提出的问题和反馈——有点像产品的用户讨论区。如果你用这个工具遇到了问题，也可以来这里搜搜看有没有人问过同样的问题。</p>
<p><strong>4. Releases（发布版本）</strong></p>
<p>这是普通用户最应该重点认识的区域，却也是最容易让人看懵的地方。</p>
<p>如果说 README 是项目的"说明书"，那 <strong>Releases 就是项目的"应用商店页面"</strong>——开发者在这里发布可以直接用的程序版本，不需要你懂任何代码。</p>
<p>点开 <code>Releases</code>，你会看到类似这样的信息：</p>
<ul><li>版本号（比如 <code>v5.48.0</code>），标着 <strong>Latest</strong> 的就是当前最新稳定版</li><li>发布日期（比如 <code>on Mar 27</code>）</li><li>一段更新说明（changelog），写了这个版本修了什么、加了什么功能</li><li>下方的 <strong>Assets（资产/附件）</strong> 区域，列出了所有可以下载的文件</li></ul>
<figure class="figure">
<img src="image/08.png" alt="Releases 页面的 Assets 下载区域" loading="lazy">
<figcaption>Releases 页面的 Assets 下载区域</figcaption>
</figure>
<p>Assets 里那一堆文件名，才是真正让人摸不着头脑的地方。我来逐一拆解：</p>
<p><strong>🖥️ 按操作系统选文件</strong></p>
<p>首先，根据你的操作系统，找对应的文件：</p>
<div class="table-wrap"><table>
<tr><th>文件名中包含</th><th>对应系统</th></tr>
<tr><td><code>windows</code> 或 <code>win</code></td><td>Windows</td></tr>
<tr><td><code>macos</code> 或 <code>darwin</code> 或 <code>mac</code></td><td>macOS（苹果电脑）</td></tr>
<tr><td><code>linux</code></td><td>Linux</td></tr>
</table></div>
<p><strong>💻 还要区分芯片架构</strong></p>
<p>现在光知道系统还不够，还得看芯片。尤其是 Mac 用户：</p>
<div class="table-wrap"><table>
<tr><th>文件名中包含</th><th>适用于</th></tr>
<tr><td><code>x64</code> 或 <code>x86_64</code> 或 <code>amd64</code></td><td>Intel 芯片的电脑（旧款 Mac、大多数 Windows 电脑）</td></tr>
<tr><td><code>arm64</code> 或 <code>aarch64</code> 或 <code>apple-silicon</code></td><td>ARM 芯片（苹果 M1/M2/M3 系列 Mac，部分新 Windows）</td></tr>
<tr><td><code>x86</code> 或 <code>i686</code></td><td>32位系统（很老的电脑，现在很少见）</td></tr>
</table></div>
<blockquote class="callout">
<p>💡 <strong>不知道自己 Mac 是什么芯片？</strong> 点左上角苹果图标 → "关于本机"，如果写的是 "Apple M1/M2/M3" 就选 <code>arm64</code>；如果写的是 "Intel" 就选 <code>x64</code>。</p>
<p><strong>Windows 用户</strong> 大概率选 <code>x64</code> 就对了，除非你的电脑买于2022年之后且特别注明是 ARM。</p>
</blockquote>
<p><strong>📦 文件格式代表什么？</strong></p>
<p>选对了系统和芯片，还有一关：文件格式。</p>
<p><strong>桌面端：</strong></p>
<div class="table-wrap"><table>
<tr><th>扩展名</th><th>说明</th><th>适合谁</th></tr>
<tr><td><code>.exe</code></td><td>Windows 安装程序，双击直接安装</td><td>Windows 用户首选</td></tr>
<tr><td><code>.msi</code></td><td>Windows 安装包的另一种格式，同样双击安装</td><td>Windows 用户</td></tr>
<tr><td><code>.zip</code> / <code>.7z</code></td><td>压缩包，解压后直接运行，不需要安装</td><td>想"绿色版"不写注册表的用户</td></tr>
<tr><td><code>.dmg</code></td><td>macOS 专用安装镜像，双击打开拖到 Applications 文件夹</td><td>Mac 用户首选</td></tr>
<tr><td><code>.pkg</code></td><td>macOS 安装包，双击运行安装向导</td><td>Mac 用户</td></tr>
<tr><td><code>.AppImage</code></td><td>Linux 专用，单文件可执行，给权限直接运行</td><td>Linux 用户</td></tr>
<tr><td><code>.deb</code></td><td>Linux（Debian/Ubuntu 系）的安装包</td><td>Ubuntu 用户</td></tr>
<tr><td><code>.rpm</code></td><td>Linux（RedHat/Fedora 系）的安装包</td><td>Fedora 用户</td></tr>
<tr><td><code>.tar.gz</code> / <code>.tar.xz</code></td><td>Linux/Mac 的压缩源码包，通常需要编译</td><td>开发者，普通用户一般不需要</td></tr>
</table></div>
<figure class="figure">
<img src="image/09.jpg" alt="Android 安装 APK 时需在设置中允许来自此来源的应用" loading="lazy">
<figcaption>Android 安装 APK 时需在设置中允许来自此来源的应用</figcaption>
</figure>
<p><strong>📱 移动端：</strong></p>
<div class="table-wrap"><table>
<tr><th>扩展名</th><th>说明</th><th>适合谁</th></tr>
<tr><td><code>.apk</code></td><td>Android 安装包，相当于 Android 版的 <code>.exe</code></td><td>Android 用户</td></tr>
<tr><td><code>.aab</code></td><td>Android App Bundle，是给开发者上传到 Google Play 用的格式，<strong>普通用户无法直接安装</strong>，跳过</td><td>开发者专用</td></tr>
<tr><td><code>.ipa</code></td><td>iOS 应用包，但<strong>直接下载没有用</strong>——苹果系统有严格限制，不能随意安装来路不明的 <code>.ipa</code>，正规渠道只能走 App Store</td><td>iOS 用户一般用不到</td></tr>
</table></div>
<blockquote class="callout">
<p>⚠️ <strong>关于 Android APK 的安全提示</strong>：从 GitHub 下载 APK 安装时，手机会弹出"未知来源应用"的警告，需要你手动允许。这不代表文件有问题——很多知名开源应用（比如 F-Droid 上的 App）都是这样分发的。但前提是你要确认这是<strong>官方仓库</strong>发布的版本，不要从来路不明的链接下载 APK。</p>
<p>文件名里同样会标注芯片架构：<code>arm64-v8a</code> 是现在绝大多数安卓手机用的架构，优先选这个；<code>armeabi-v7a</code> 是老款32位机型；<code>x86_64</code> 是极少数安卓模拟器或特殊设备。不确定就选 <code>arm64-v8a</code>，或者找有 <code>universal</code>（通用）字样的版本。</p>
</blockquote>
<p><strong>还有两个固定出现的文件，不用管：</strong></p>
<ul><li><code>Source code (zip)</code> 和 <code>Source code (tar.gz)</code> — 这是项目的<strong>源代码压缩包</strong>，不是可运行的程序。普通用户完全不需要下载这两个。</li></ul>
<hr>
<p><strong>用一个真实项目来练手：pot-desktop</strong></p>
<p>光看表格太抽象，我们来看一个真实项目的 Releases 页面。</p>
<p><a href="https://github.com/pot-app/pot-desktop" target="_blank" rel="noopener"><strong>pot-desktop</strong></a> 是一款非常流行的开源划词翻译 + OCR 工具（⭐ 17k+ Stars），由中文开发者维护，支持 Windows、Mac、Linux 全平台，它的 Releases 页面几乎涵盖了你在 GitHub 上会见到的所有文件格式，是练手的绝佳例子。</p>
<p>打开它的 <a href="https://github.com/pot-app/pot-desktop/releases" target="_blank" rel="noopener">Releases 页面</a>，展开最新版本的 Assets，你会看到密密麻麻将近 40 个文件，第一次看确实令人头皮发麻：</p>
<figure class="figure">
<img src="image/10.png" alt="pot-desktop 项目的 Releases Assets 列表（39 个文件）" loading="lazy">
<figcaption>pot-desktop 项目的 Releases Assets 列表（39 个文件）</figcaption>
</figure>
<pre><code class="language-text">Assets (39)
pot-3.0.7-1.aarch64.rpm ← Linux / Fedora 系 / ARM64 芯片
pot-3.0.7-1.armhfp.rpm ← Linux / Fedora 系 / ARMv7（老款 ARM）
pot-3.0.7-1.i386.rpm ← Linux / Fedora 系 / 32位 x86
pot-3.0.7-1.x86_64.rpm ← Linux / Fedora 系 / 64位（常见 PC）
pot_3.0.7_aarch64.deb ← Linux / Ubuntu 系 / ARM64 芯片
pot_3.0.7_aarch64_universal.deb ← Linux / Ubuntu 系 / ARM64 / 兼容性更好的版本
pot_3.0.7_amd64.deb ← Linux / Ubuntu 系 / 64位（常见 PC）
pot_3.0.7_amd64_universal.deb ← Linux / Ubuntu 系 / 64位 / 兼容性更好的版本
pot_3.0.7_armhf.deb ← Linux / Ubuntu 系 / ARMv7
pot_3.0.7_armhf_universal.deb ← Linux / Ubuntu 系 / ARMv7 / 兼容性更好的版本
pot_3.0.7_i386.deb ← Linux / Ubuntu 系 / 32位
pot_3.0.7_i386_universal.deb ← Linux / Ubuntu 系 / 32位 / 兼容性更好的版本
pot_3.0.7_amd64.AppImage ← Linux / AppImage 单文件 / 64位
pot_3.0.7_aarch64.dmg ← macOS / M1/M2/M3（ARM）芯片
pot_3.0.7_aarch64.app.tar.gz ← macOS / M1/M2/M3 / 压缩包形式（同上，二选一）
pot_3.0.7_aarch64.app.tar.gz.sig ← 签名验证文件，不用下载
pot_3.0.7_x64.dmg ← macOS / Intel 芯片
pot_3.0.7_x64.app.tar.gz ← macOS / Intel / 压缩包形式
pot_3.0.7_x64-setup.exe ← Windows / Intel/AMD 64位 / 安装版 ✅ 大多数人选这个
pot_3.0.7_x64_fix_webview2_runtime-setup.exe ← Windows / 64位 / 企业版系统专用（内置运行库）
pot_3.0.7_arm64-setup.exe ← Windows / ARM 芯片
pot_3.0.7_arm64_fix_webview2_runtime-setup.exe ← Windows / ARM / 企业版专用
pot_3.0.7_x86-setup.exe ← Windows / 32位旧电脑
pot.pbar ← pot 专用插件包，不是安装程序
Pot.popclipextz ← macOS PopClip 插件，非主程序
Source code (zip) ← 源代码，普通用户不需要
Source code (tar.gz) ← 源代码，普通用户不需要</code></pre>
<p>看起来很多，但用<strong>系统 + 芯片 + 格式</strong>三步过滤后，绝大多数文件都可以直接略过：</p>
<p><strong>如果你是 Windows 用户（Intel/AMD 芯片，占大多数）：</strong></p>
<p>→ 下载 <code>pot_3.0.7_x64-setup.exe</code>，双击安装，完事。</p>
<p><strong>如果你是 Mac 用户（M1/M2/M3 芯片）：</strong></p>
<p>→ 下载 <code>pot_3.0.7_aarch64.dmg</code>，打开拖入 Applications。</p>
<p><strong>如果你是 Mac 用户（Intel 芯片）：</strong></p>
<p>→ 下载 <code>pot_3.0.7_x64.dmg</code>，同上。</p>
<p><strong>如果你是 Ubuntu 用户（普通 64位 PC）：</strong></p>
<p>→ 下载 <code>pot_3.0.7_amd64.deb</code>，安装；如果装不上再换 <code>_universal</code> 版本。</p>
<p>39 个文件，最终你只需要下载其中 <strong>1 个</strong>。其余的都是给其他系统、其他芯片、或者开发者准备的，完全不用管。</p>
<blockquote class="callout">
<p>💡 <strong>顺便一提</strong>：pot-desktop 本身非常好用，选词即翻译、截图 OCR，支持几十种翻译引擎，感兴趣可以顺手装一个试试。</p>
</blockquote>
<hr>
<p><strong>🚨 下载完装不上？常见报错和解决方法</strong></p>
<p>这是很多人卡住的地方——文件下载好了，双击却弹出一个让人摸不着头脑的报错。别慌，这几乎是每个人第一次装开源软件都会遇到的"门槛"，原因很固定，解法也很固定。</p>
<p><strong>Mac 篇</strong></p>
<figure class="figure">
<img src="image/11.png" alt="macOS 提示「Apple 无法验证该应用」的安全对话框" loading="lazy">
<figcaption>macOS 提示「Apple 无法验证该应用」的安全对话框</figcaption>
</figure>
<p><strong>问题一："无法打开，因为它来自身份不明的开发者"</strong> 或 <strong>"已损坏，无法打开"</strong></p>
<p>这是 macOS 的 Gatekeeper 安全机制在起作用。苹果要求开发者花钱进行"公证"认证，但很多开源项目的开发者不愿意或没有完成这个流程，所以系统会直接拦截。<strong>文件本身没有问题。</strong></p>
<p>解决方法：</p>
<ol>
<li><strong>方法一（推荐）</strong>：打开「系统设置」→「隐私与安全性」，往下滚，你会看到一条提示说"已阻止使用 XXX，因为来自身份不明的开发者"，旁边有个<strong>「仍要打开」</strong>按钮，点它，再确认一次就行了。
<figure class="figure">
<img src="image/12.png" alt="在「隐私与安全性」中点击「仍要打开」" loading="lazy">
<figcaption>在「隐私与安全性」中点击「仍要打开」</figcaption>
</figure>
</li>
<li><strong>方法二</strong>：在 Finder 里找到这个 <code>.app</code> 文件，<strong>按住 <code>Control</code> 键再单击</strong>（或者右键），选「打开」，弹出的对话框里会多出一个「打开」按钮，点它即可。之后再双击就不会拦截了。</li>
<li><strong>方法三（如果以上都没用）</strong>：打开「终端」（Terminal），输入以下命令，把路径换成你的 app 实际位置：
<pre><code>xattr -cr /Applications/软件名.app</code></pre>
回车执行，然后再尝试打开。</li>
</ol>
<blockquote class="callout">
<p>⚠️ 以上方法只适用于你<strong>信任的来源</strong>（比如 GitHub 官方仓库的 Releases）。对于来路不明的软件，系统的拦截是在保护你，不要随意绕过。</p>
</blockquote>
<hr>
<p><strong>问题二：<code>.dmg</code> 打开后拖进 Applications，软件却找不到或打不开</strong></p>
<p>常见原因有两个：</p>
<ul><li><strong>还没有真正"安装"完</strong>：<code>.dmg</code> 打开后，你需要把里面的 <code>.app</code> 图标<strong>拖动到旁边的 Applications 文件夹快捷方式上</strong>，才算安装完成。只是打开了 <code>.dmg</code> 镜像，不等于安装好了。</li><li><strong>直接从 <code>.dmg</code> 里运行了</strong>：有些人会直接双击 <code>.dmg</code> 里的 app 来用，这样可能会有权限问题。正确做法是拖进 Applications 后，从启动台或 Applications 文件夹里打开。</li></ul>
<hr>
<p><strong>问题三：M1/M2/M3 Mac 下载了 <code>x64</code> 版本，运行很卡或有奇怪问题</strong></p>
<p>这是因为苹果芯片原生支持 <code>arm64</code>，运行 <code>x64</code> 程序需要通过 Rosetta 2 转译，虽然大多数时候没问题，但个别软件会有兼容性问题。解决方法就是回到 Releases 页面，重新下载带 <code>arm64</code> 或 <code>apple-silicon</code> 字样的版本。</p>
<hr>
<p><strong>Windows 篇</strong></p>
<figure class="figure">
<img src="image/13.png" alt="Windows SmartScreen 警告，点击「更多信息」后选择「仍要运行」" loading="lazy">
<figcaption>Windows SmartScreen 警告，点击「更多信息」后选择「仍要运行」</figcaption>
</figure>
<p><strong>问题一："Windows 已保护你的电脑"（SmartScreen 蓝色警告框）</strong></p>
<p>这是 Windows Defender SmartScreen 的拦截提示，原因和 Mac 一样——软件没有经过微软的数字签名认证。同样，<strong>来自正规 GitHub 仓库的文件本身没有危险。</strong></p>
<p>解决方法：点击蓝色警告框左下角的<strong>「更多信息」</strong>，然后会出现一个<strong>「仍要运行」</strong>按钮，点它就能继续安装。</p>
<hr>
<p><strong>问题二：安装时被杀毒软件（360、火绒、Windows Defender）直接删除或隔离</strong></p>
<p>开源软件有时会触发杀毒软件的误报，尤其是一些系统工具类软件（因为它们需要调用底层权限，行为特征和某些病毒相似）。</p>
<p>解决步骤：</p>
<ol><li>先去杀毒软件的<strong>「隔离区」或「病毒库」</strong>，找到被删的文件，选择<strong>「恢复」</strong>或<strong>「信任」</strong></li><li>把这个软件的安装目录<strong>加入白名单/信任区</strong>，防止下次再被删</li><li>如果实在不放心，可以去 <a href="https://www.virustotal.com" target="_blank" rel="noopener">VirusTotal</a> 上传文件，它会用70多个杀毒引擎同时扫描，结果一目了然</li></ol>
<hr>
<p><strong>问题三：提示"缺少 DLL 文件"或"无法启动此程序"</strong></p>
<p>这通常是电脑缺少某个<strong>运行库（Runtime）</strong>。常见的有：</p>
<ul><li><strong>Visual C++ 运行库</strong>：去微软官网搜索 "Visual C++ Redistributable" 下载安装，选最新版本，<code>x64</code> 和 <code>x86</code> 都装上</li><li><strong>.NET Framework</strong> 或 <strong>.NET Runtime</strong>：同样去微软官网下载对应版本，报错信息里通常会写需要哪个版本</li></ul>
<p>安装完运行库，再重新打开软件，十有八九就好了。</p>
<hr>
<p><strong>问题四：解压 <code>.zip</code> 后双击 <code>.exe</code>，一闪而过什么都没发生</strong></p>
<p>可能原因：</p>
<ul><li><strong>路径包含中文</strong>：把软件文件夹移动到一个<strong>全英文路径</strong>的地方（比如 <code>C:\Tools\软件名</code>），再运行</li><li><strong>需要以管理员身份运行</strong>：右键 <code>.exe</code> → <strong>「以管理员身份运行」</strong></li><li><strong>解压不完整</strong>：用 <a href="https://www.7-zip.org/" target="_blank" rel="noopener">7-Zip</a>（免费开源）重新解压，Windows 自带的解压偶尔会漏文件</li></ul>
<hr>
<h3 id="场景四-给自己创建一个仓库">场景四：给自己创建一个仓库</h3>
<figure class="figure">
<img src="image/14.png" alt="点击右上角 + 号，选择 New repository" loading="lazy">
<figcaption>点击右上角 + 号，选择 New repository</figcaption>
</figure>
<p>即使你不写代码，GitHub 也可以用来：</p>
<ul><li><strong>管理笔记</strong>（用 Markdown 格式写，后面会解释）</li><li><strong>备份重要文件</strong></li><li><strong>写个人博客</strong>（GitHub Pages 功能，免费！）</li><li><strong>整理你的学习资源清单</strong></li></ul>
<p>创建仓库很简单：</p>
<ol><li>登录后，点右上角 <strong><code>+</code></strong> 号 → <strong><code>New repository</code></strong></li><li>给仓库取个名字（比如 <code>my-notes</code> 或者 <code>reading-list</code>）</li><li>选择 <strong>Public（公开）</strong> 还是 <strong>Private（私密）</strong></li><li>勾选 <strong><code>Add a README file</code></strong>（这样仓库不是空的）</li><li>点 <strong><code>Create repository</code></strong></li></ol>
<figure class="figure">
<img src="image/15.png" alt="创建仓库：填写名称、选择公开/私密、勾选 Add a README" loading="lazy">
<figcaption>创建仓库：填写名称、选择公开/私密、勾选 Add a README</figcaption>
</figure>
<p>完成！你有自己的第一个 GitHub 仓库了。</p>
<hr>
<h2 id="四-markdown-不会代码也能用的排版语言">四、Markdown：不会代码也能用的排版语言</h2>
<p>GitHub 上大量的文字内容（README、Issue、笔记等）都用 <strong>Markdown</strong> 来写。</p>
<p>听起来很技术，其实超简单——它就是一套用<strong>纯文字符号</strong>来排版的规则：</p>
<pre><code class="language-markdown"># 这是一级标题
## 这是二级标题
**这是加粗文字**
*这是斜体文字*
- 这是无序列表项
- 又一项
1. 这是有序列表
2. 第二条
> 这是引用块
[这是超链接](https://github.com)</code></pre>
<p>写完之后，GitHub 会自动把它渲染成好看的格式。你不需要安装 Word，不需要调字体大小，<strong>写什么符号，它就知道你要什么格式</strong>。</p>
<p>花 10 分钟学一下 Markdown 的基本语法，你会发现它比 Word 好用多了——至少在写纯文字内容的时候。</p>
<hr>
<h2 id="五-readme-里那些-看不懂的命令-是什么意思">五、README 里那些"看不懂的命令"是什么意思？</h2>
<p>你有没有遇到过这种情况：某个 GitHub 项目看起来很厉害，README 里也有说明，但往下一翻，全是这样的东西——</p>
<pre><code class="language-text">npm install
npm run start</code></pre>
<p>或者：</p>
<pre><code class="language-text">pip install -r requirements.txt
python app.py</code></pre>
<p>然后你就不知道该怎么办了。</p>
<p>这一章就是专门来解释这些东西的。<strong>不要跳过它——这是绝大多数人卡在 GitHub 门口最真实的原因。</strong></p>
<hr>
<h3 id="先理解一件事-有些软件需要-运行环境">先理解一件事：有些软件需要"运行环境"</h3>
<p>你平时用的软件（微信、浏览器、PS），安装完就能直接双击打开，因为它们是"打包好的成品"。</p>
<p>但 GitHub 上很多项目发布的是<strong>源代码</strong>，不是打包好的程序。这就好比你拿到了一份食谱，而不是一道做好的菜——你还需要有厨房、有食材、有锅，才能把它做出来。</p>
<p>这个"厨房"，就是所谓的<strong>运行环境（Runtime）</strong>。</p>
<p>不同语言写的项目，需要不同的运行环境。下面我来逐一介绍你最常见到的几种。</p>
<hr>
<h3 id="vs-code-打开和编辑项目文件的标配工具">📝 VS Code：打开和编辑项目文件的标配工具</h3>
<p>在正式介绍各种运行环境之前，有一个工具值得单独说——<strong>Visual Studio Code</strong>，简称 VS Code。</p>
<p>它是微软出品的免费代码编辑器，也是目前全球使用人数最多的编辑器没有之一。但它不只是"给程序员用的"，对于从 GitHub 下载项目、查看和编辑配置文件的普通用户来说，它同样是最顺手的工具。</p>
<p><strong>为什么推荐用 VS Code 打开 GitHub 项目？</strong></p>
<ul><li>打开一个项目文件夹，左侧会展示完整的文件树，一目了然
<figure class="figure">
<img src="image/16.png" alt="用 VS Code 打开项目文件夹，查看完整文件结构" loading="lazy">
<figcaption>用 VS Code 打开项目文件夹，查看完整文件结构</figcaption>
</figure>
</li><li>对 Markdown、JSON、YAML 等各种配置文件都有语法高亮，看起来清晰不费眼</li><li>内置终端，不需要单独开命令行窗口，直接在编辑器里输命令</li><li>有大量插件，包括中文界面包</li><li>完全免费，Windows / Mac / Linux 全支持</li></ul>
<figure class="figure">
<img src="image/17.png" alt="在 code.visualstudio.com 下载 VS Code" loading="lazy">
<figcaption>在 code.visualstudio.com 下载 VS Code</figcaption>
</figure>
<p><strong>怎么安装？</strong></p>
<p>去 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">code.visualstudio.com</a> 下载，选对应系统安装即可。</p>
<figure class="figure">
<img src="image/18.png" alt="在 VS Code 插件市场搜索并安装中文语言包" loading="lazy">
<figcaption>在 VS Code 插件市场搜索并安装中文语言包</figcaption>
</figure>
<p>安装后，打开 VS Code，按 <code>Ctrl+Shift+X</code>（Mac 用 <code>Cmd+Shift+X</code>）打开插件市场，搜索 <strong>Chinese</strong> 安装中文语言包，重启后界面就变成中文了。</p>
<p><strong>怎么用它打开一个 GitHub 项目？</strong></p>
<p>把项目文件夹直接拖到 VS Code 图标上，或者在 VS Code 里选「文件」→「打开文件夹」，选中项目所在的文件夹即可。之后你会看到完整的项目结构，点击任意文件就能查看和编辑。</p>
<figure class="figure">
<img src="image/19.png" alt="VS Code 菜单栏：终端 → 新建终端" loading="lazy">
<figcaption>VS Code 菜单栏：终端 → 新建终端</figcaption>
</figure>
<blockquote class="callout">
<p>💡 <strong>内置终端怎么打开？</strong> 菜单栏选「终端」→「新建终端」，或者按 <code>Ctrl+`</code>（反引号）。打开后，终端的当前路径自动就在你的项目文件夹里，可以直接输入 <code>pip install</code> 或 <code>npm install</code> 这类命令，不需要手动 <code>cd</code>。</p>
</blockquote>
<hr>
<h3 id="python-和-pip">🐍 Python 和 pip</h3>
<figure class="figure">
<img src="image/20.png" alt="Python 简介：AI、数据分析、自动化脚本的主流语言" loading="lazy">
<figcaption>Python 简介：AI、数据分析、自动化脚本的主流语言</figcaption>
</figure>
<p><strong>Python 是什么？</strong></p>
<p>Python 是目前最流行的编程语言之一，尤其在 AI、数据分析、自动化脚本领域几乎无处不在。你在 GitHub 上看到的大量 AI 工具、爬虫、效率脚本，十有八九是 Python 写的。</p>
<p><strong>怎么安装 Python？</strong></p>
<p>去 <a href="https://www.python.org/downloads/" target="_blank" rel="noopener">python.org</a> 下载最新版，安装时<strong>务必勾选 "Add Python to PATH"</strong>（Windows 用户尤其注意，不勾这个后面会很麻烦）。</p>
<p>安装完后，打开终端（Windows 叫"命令提示符"或"PowerShell"，Mac 叫"终端"），输入：</p>
<pre><code class="language-text">python --version</code></pre>
<p>如果输出了版本号（比如 <code>Python 3.12.0</code>），说明安装成功。</p>
<hr>
<p><strong>pip 是什么？</strong></p>
<p>pip 是 Python 的<strong>包管理器</strong>——你可以把它理解成 Python 世界里的"应用商店"，专门用来安装别人写好的 Python 库（功能模块）。</p>
<p>它跟 Python 一起安装，不需要单独下载。</p>
<p><strong>常见的 pip 命令：</strong></p>
<pre><code class="language-bash"># 安装某个库
pip install 库的名字
# 按照项目的依赖清单批量安装（最常用！）
pip install -r requirements.txt
# 查看已安装的库
pip list
# 升级某个库
pip install --upgrade 库的名字</code></pre>
<p>你在 README 里看到 <code>pip install -r requirements.txt</code>，意思是：按照这个项目提供的 <code>requirements.txt</code> 文件，把所有需要的库都装上。这是运行一个 Python 项目的标准第一步。</p>
<blockquote class="callout">
<p>💡 <strong>Mac 用户注意</strong>：系统自带的 Python 版本很老，建议从官网重新安装新版。安装后命令可能是 <code>python3</code> 和 <code>pip3</code> 而不是 <code>python</code> 和 <code>pip</code>，两者功能一样。</p>
</blockquote>
<blockquote class="callout">
<p>⚠️ <strong>常见报错</strong>：如果提示 <code>pip: command not found</code>，说明 Python 没有正确加入系统路径。Windows 用户重新运行安装程序，勾选"Add to PATH"；Mac 用户尝试用 <code>pip3</code> 替代 <code>pip</code>。</p>
</blockquote>
<hr>
<h3 id="node-js-和-npm">🟢 Node.js 和 npm</h3>
<figure class="figure">
<img src="image/21.png" alt="Node.js 简介：让 JavaScript 在电脑上运行的环境" loading="lazy">
<figcaption>Node.js 简介：让 JavaScript 在电脑上运行的环境</figcaption>
</figure>
<p><strong>Node.js 是什么？</strong></p>
<p>Node.js 是让 JavaScript 能在电脑上（而不只是浏览器里）运行的环境。大量的前端工具、网页应用、桌面工具（比如 VS Code 本身）都是用 Node.js 生态构建的。</p>
<p><strong>怎么安装 Node.js？</strong></p>
<p>去 <a href="https://nodejs.org/" target="_blank" rel="noopener">nodejs.org</a> 下载，选带 <strong>LTS</strong>（长期支持版）标签的那个，更稳定。</p>
<p>安装完后验证：</p>
<pre><code class="language-text">node --version
npm --version</code></pre>
<p>两个都输出版本号就成功了。</p>
<hr>
<p><strong>npm 是什么？</strong></p>
<p>npm（Node Package Manager）是 Node.js 的包管理器，地位相当于 Python 里的 pip。安装 Node.js 时会自动附带。</p>
<p><strong>常见的 npm 命令：</strong></p>
<pre><code class="language-bash"># 安装项目所有依赖（进入项目文件夹后运行，最常用！）
npm install